将对象传递给自定义指令而不创建观察者？答案

【问题标题】：Pass object to custom directive without creating watchers?将对象传递给自定义指令而不创建观察者？
【发布时间】：2016-06-20 07:40:34
【问题描述】：

我创建了一个自定义指令（“可重用组件”），它通过绑定到通过 HTML 参数传递给它的两个对象来创建一个隔离范围。这个问题很快就出现了，因为我的文档中有多达 600 个这样的组件，这导致了 1200 个观察者和较差的性能。我不需要这些观察者，只需要某种形式的“绑定一次”——传递对象时的功能。有没有办法实现这一点（或解决方法），还是我需要重新设计我的代码？

（将数据作为一个或多个字符串而不是对象传递是一个非常不受欢迎的选择。）

【问题讨论】：

双向绑定的替代方案记录在AngularJS Comprehensive Directive API - scope。

标签： angularjs angularjs-directive watch bindonce

【解决方案1】：

您可以手动评估对象，而无需使用 Angular 指令范围绑定。假设您有一个指令 some-component 并且您想在其中传递一个 config 对象，以保留隔离的指令范围。你可以这样做：

<some-component config="controller.config"></some-component>

那么指令可能如下所示：

.directive('someComponent', function() {
  return {
    scope: {
      // some bindings, but not config
    },
    link: function(scope, element, attrs) {
      var config = scope.$parent.$eval(attrs.config)
      console.log(config)
    }
  }
})

$parent 在这里是必需的，因为指令范围是孤立的，并且您希望获得在外部（父）范围中定义的对象。

尝试一下，看看它是否对您的设置有影响。

【讨论】：

这符合要求，但接受的答案具有即使在 ng-repeating （无法从父范围中提取对象）也能正常工作的优势。
是的，当然。我完全忘记了一次性绑定。

【解决方案2】：

你应该使用单向绑定：

scope : {
    myField: '&'
    ....
}

在指令中使用：

<my-directive my-field="::myDataObjectFromScope"></my-directive>

也许this 会有所帮助

但是如果值是不变的，你应该使用服务将你的数据与业务逻辑分开

【讨论】：