在自定义指令的范围绑定中使用符号“@”、“&”、“=”和“>”：AngularJS

Posted 2023-02-19

技术标签:

【中文标题】在自定义指令的范围绑定中使用符号“@”、“&”、“=”和“>”：AngularJS【英文标题】：Use of symbols '@', '&', '=' and '>' in custom directive's scope binding: AngularJS 【发布时间】：2016-10-15 13:59:42 【问题描述】：

我已经阅读了很多关于在 AngularJS 中实现自定义指令时使用这些符号的内容，但我仍然不清楚这个概念。

如果我在自定义指令中使用其中一个范围值，这意味着什么？

var mainApp = angular.module("mainApp", []);
mainApp.directive('modalView',function()
  return
     restrict:'E',
     scope:'@' OR scope:'&' OR scope:'=' OR scope:'>' OR scope:true
  
);

我们究竟在用这里的范围做什么？

~~我也不确定官方文档中是否存在"scope:'>'"。它已在我的项目中使用。~~（"scope:'>'" 的使用是我项目中的一个问题，已修复。）

【问题讨论】：

另一个问题中的better answer。 【参考方案1】：

> 不在文档中。

< 用于单向绑定。

@ 绑定用于传递字符串。这些字符串支持插入值的表达式。

= 绑定用于双向模型绑定。父作用域中的模型链接到指令隔离作用域中的模型。

& 绑定用于将方法传递到指令的范围内，以便可以在指令中调用它。

当我们在指令中设置 scope: true 时，Angular js 将为该指令创建一个新的作用域。这意味着对指令范围所做的任何更改都不会反映在父控制器中。

【讨论】：

【参考方案2】：

在 AngularJS 指令中，作用域允许您访问应用该指令的元素的属性中的数据。

最好用一个例子来说明这一点：

<div my-customer name="Customer XYZ"></div>

和指令定义：

angular.module('myModule', [])
.directive('myCustomer', function() 
  return 
    restrict: 'E',
    scope: 
      customerName: '@name'
    ,
    controllerAs: 'vm',
    bindToController: true,
    controller: ['$http', function($http) 
      var vm = this;

      vm.doStuff = function(pane) 
        console.log(vm.customerName);
      ;
    ],
    link: function(scope, element, attrs) 
      console.log(scope.customerName);
    
  ;
);

当使用scope 属性时，指令处于所谓的“隔离范围”模式，这意味着它不能直接访问父控制器的范围。

简单来说，绑定符号的含义是：

someObject: '='（双向数据绑定）

someString: '@'（直接传递或通过双花括号符号的插值传递）

someExpression: '&'（例如hideDialog()）

此信息显示在 AngularJS directive documentation page 中，尽管在整个页面中有些分散。

符号> 不是语法的一部分。

但是，< 确实作为AngularJS component bindings 的一部分存在，意味着单向绑定。

【讨论】：

@? 呢？值得注意的是<不仅兼容1.5中的组件，还兼容指令。 @Homer ? 表示属性为optional。【参考方案3】：

<单向绑定

=双向绑定

&函数绑定

@ 只传递字符串

【讨论】：

重复相同的答案是没有意义的，抱歉不是相同的答案似乎是从上述答案中提取的信息。有时更短的答案往往更实用！如果你能用几句话解释就不需要添加垃圾信息:) 这本来可以更好地作为编辑来引导投票率较高的选项。【参考方案4】：

当我们创建一个客户指令时，该指令的作用域可以是独立作用域，这意味着该指令不与控制器共享一个作用域；指令和控制器都有自己的范围。但是，可以通过三种可能的方式将数据传递到指令范围。

@

=

&

【讨论】：

【参考方案5】：

AngularJS documentation on directives 对于符号的含义写得很好。

要清楚，你不能只拥有

scope: '@'

在指令定义中。您必须具有应用这些绑定的属性，如：

scope: 
    myProperty: '@'

我强烈建议您阅读网站上的文档和教程。关于独立作用域和其他主题，您需要了解更多信息。

这是来自上述链接页面的直接引用，关于scope 的值：

范围属性可以是真、对象或假值：

falsy：不会为指令创建范围。该指令将使用其父级的作用域。

true：将为指令的元素创建一个原型继承自其父级的新子范围。如果同一元素上的多个指令请求一个新范围，则只会创建一个新范围。新的范围规则不适用于模板的根，因为模板的根总是获得一个新的范围。

... （对象哈希）：为指令的元素创建一个新的“隔离”范围。 “隔离”作用域与普通作用域的不同之处在于它在原型上并不从其父作用域继承。这在创建可重用组件时很有用，这些组件不应意外读取或修改父范围内的数据。

^{2017 年 2 月 13 日从 https://code.angularjs.org/1.4.11/docs/api/ng/service/$compile#-scope- 获取，授权为 CC-by-SA 3.0}

【讨论】：

【参考方案6】：

我无法将值与 AngularJS 1.6 中的任何符号绑定。我根本没有得到任何价值，只有 undefined，尽管我这样做的方式与同一个文件中其他有效绑定的方式完全相同。

问题是：我的变量名有一个下划线。

这失败了：