在{}和link中为angular指令定义独立作用域变量的区别

Difference between defining isolated scope variable for angular directive in {} and in link

本文关键字：独立 定义 作用域 变量 区别 指令 angular link 中为      更新时间：2023-09-26

在angular指令中，我知道我可以分配孤立的作用域，但我需要添加'='或'@'或'&'来定义{}中的变量，而我不需要在link中这样做，例如:

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

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

这个也可以(link函数在指令中)

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

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

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

谢谢! !

使用link属性，您只是在处理指令的隔离作用域。使用scope属性，您将定义如何将元素(在父作用域中)的属性导入到隔离作用域中。它们有不同的用途。

=， @和&前缀定义了在将属性导入隔离作用域时如何解释属性:

  1. modelParent: '=modelIsolate' -通过在父作用域中定义的模型(modelParent)和在隔离作用域中定义的模型(modelIsolate)之间建立双向模型绑定，将模型导入到隔离作用域中。这里，指令中的modelParent属性被解释为一个模型。

  2. attrib1: '@attrib1' -通过将属性值计算为字符串，将字符串导入到隔离作用域中。属性可能有内插表达式。例如，如果你把'hello {{name}}'作为一个属性传递给你的指令，而name在父作用域中被绑定到'James'，那么在你的隔离作用域中被绑定到' atrib1 '的将是$scope。attrib1 = '你好James'。当'name'绑定发生变化时(即从James变为Mike)，那么隔离作用域中的'attrib1'将自动更新。由于这个原因，@绑定有时被称为单向绑定。就我个人而言，我喜欢把它看作是支持插值的字符串。

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

这三种方法都将范围变量从父范围导入到隔离的范围。但是，根据您想如何解释指令属性，您将更喜欢其中一个而不是其他。

相关文章：