在自定义指令的作用域绑定中使用符号“@”、“ &”、“ =”和“ >”: AngularJS

我读了很多关于在 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:'>'"是我的项目中的一个问题，已经修复了。)

162081 次浏览
小开

文档中没有 >。

<用于单向绑定。

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

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

&绑定用于将方法传递到指令的作用域中，以便可以在指令中调用该方法。

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

小开
最佳答案

在 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 指令文档页中有所体现，尽管在整个页面中有所传播。

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

然而，<确实作为 组件绑定的一部分存在，并且意味着单向绑定。

小开

关于指令的 AngularJS 文档很好地解释了这些符号的含义。

先说清楚，你不能

scope: '@'

必须具有应用这些绑定的属性，如:

scope: {
myProperty: '@'
}

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

下面是从上面链接的页面中直接引用的关于 scope值的报价:

Scope 属性可以是 true、对象或虚假值:

  • Falsy : 不会为指令创建作用域。该指令将使用其父指令的作用域。

  • true: 将为指令的元素创建一个新的子范围，该子范围通常从其父元素继承。如果同一元素上的多个指令请求一个新作用域，则只创建一个新作用域。新的范围规则不适用于模板的根，因为模板的根总是获得新的范围。

  • {...} (一个对象散列): 为指令的元素创建一个新的“隔离”作用域。“隔离”作用域不同于普通作用域，因为它不是从其父作用域原型继承的。这在创建可重用组件时非常有用，这些组件不应意外地读取或修改父作用域中的数据。

从 https://code.angularjs.org/1.4.11/docs/api/ng/service/中检索到2017-02-13

小开

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

  1. 数据可以使用 @字符串文字作为字符串传递，传递字符串值，单向绑定。
  2. 数据可以作为对象传递，使用 =字符串文字，传递对象，2种绑定方式。
  3. 数据可以作为函数传递 &字符串文字，调用外部函数，可以将数据从指令传递到控制器。
小开

<单向绑定

=双向绑定

&函数绑定

仅传递字符串

小开

我在用 AngularJS 1.6中的任何符号绑定值时遇到了麻烦。我根本没有得到任何值，只有 undefined，尽管我使用了与同一文件中的其他绑定完全相同的方法。

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

这种做法失败了:

bindings: { import_nr: '='}

这种方法是有效的:

bindings: { importnr: '='}

(不完全与最初的问题相关，但是当我查看时，这是最热门的搜索结果之一，所以希望这能帮助有同样问题的人。)


提交答案