javascript - 在 {} 和链接中为 Angular Directive(指令)定义隔离范围变量之间的区别

Question

在 Angular Directive(指令)中，我知道我可以分配隔离范围，但我需要添加“=”或“@”或“&”来定义 {} 中的变量，而我不必在链接中这样做，因为示例:

 scope: {
   foo:'=foo',
   bar:'@bar'
 }

这有效

link: function($scope, $element){
  $scope.foo = 'foo';
  $scope.bar = 'bar';
}

这也有效(链接函数在指令中)

 scope: {
   foo:'foo',
   bar:'bar'
 }

这行不通!因为我没有添加“=”或“@”或“&”

所以我的问题是，链接中的 $scope 应该与 $scope:{} 相同，两者都是相同的隔离范围，但为什么我可以在链接中定义变量而不添加“=”或“@”或“&'？

谢谢!!!

Answer 1

使用 link 属性，您只需处理指令的隔离范围。使用范围属性，您可以定义如何将元素(在父范围中)的属性导入到隔离范围中。它们有不同的目的。

=、@ 和 & 前缀定义将属性导入隔离范围时如何解释属性:

1. modelParent:'=modelIsolate' - 通过在父范围 (modelParent) 中定义的模型和隔离范围 (modelIsolate) 中定义的模型之间建立双向模型绑定(bind)，将模型导入到您的隔离范围中。此处，指令上的 modelParent 属性被解释为模型。

2. attrib1: '@attrib1' - 通过将属性值评估为字符串，将字符串导入到隔离范围中。该属性可以具有内插表达式。例如，如果您将“hello {{ name }}”作为属性传递给指令，其中 name 在父作用域中绑定(bind)到“James”，则在隔离作用域中绑定(bind)到“attrib1”的内容将是 $scope。 attrib1 = '你好詹姆斯'。当“name”绑定(bind)更改(即从 James 更改为 Mike)时，隔离范围中的“attrib1”将自动更新。因此，@绑定(bind)有时被称为单向绑定(bind)。就我个人而言，我喜欢将其视为支持插值的字符串。

3. express: '&express' - 将表达式导入到可以在父作用域中求值的隔离作用域中。这通常用于从指令的隔离范围内执行父范围中存在的函数。例如，如果您在父作用域中定义了一个点击处理程序:$scope.onclick = function() {};然后将其传递到指令中: <directive attrib1="onclick" /> ，您可以从指令中调用该函数: template: '<div ng-click="attrib1()" />' .

所有三种方法都将作用域变量从父作用域导入到隔离作用域中。但根据您想要如何解释指令属性，您会更喜欢其中一种。