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

在AngularJS的自定义指令的实现中,我已经阅读了很多这些符号的使用,但是这个概念对我来说还是不清楚的。 我的意思是,如果我使用自定义指令中的某个范围值,这意味着什么?

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

我们在这里的范围究竟是什么?

我也不确定在官方文档中是否存在“范围:”>“” 。 它已经在我的项目中使用了。

编辑-1

“范围:”>“”的使用是我的项目中的一个问题,它已被修复。

在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指令文档页面中 ,尽pipe在整个页面中有所扩展。

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

然而, <确实存在作为AngularJS组件绑定的一部分,意味着一种方式绑定。

>不在文档中。

<用于单向绑定。

@绑定是为了传递string。 这些string支持插值的{{}}expression式。

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

& binding是将一个方法传入你的指令的作用域,以便它可以在你的指令中被调用。

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

当我们创build一个客户指令时,指令的范围可以在隔离范围内,这意味着指令不与控制器共享范围。 指令和控制器都有自己的范围。 但是,数据可以通过三种可能的方式传递给指令范围。

  1. 数据可以作为string传递,使用@string,传递string值,单向绑定。
  2. 数据可以作为一个对象使用=string,传递对象,2种方式绑定传递。
  3. 数据可以作为& string的函数传递,调用外部函数,可以将数据从指令传递给控制器​​。

关于指令的AngularJS文档对于符号的含义很好。

要清楚,你不能只是有

 scope: '@' 

在一个指令定义中。 您必须具有适用于这些绑定的属性,如下所示:

 scope: { myProperty: '@' } 

我强烈build议你阅读网站上的文档和教程。 您需要了解更多有关隔离范围和其他主题的信息。

以上是关于scope值的上述链接页面的直接引用:

scope属性可以是true,一个对象或者一个falsy值:

  • falsy :将不会为该指令创build范围。 该指令将使用其父母的范围。

  • true :将为该指令的元素创build一个新的子范围,该子范围将从其父级原型inheritance。 如果同一元素上的多个指令请求一个新的作用域,则只创build一个新的作用域。 新的作用域规则不适用于模板的根,因为模板的根始终获得新的作用域。

  • {...} (对象散列) :为指令的元素创build一个新的“隔离”作用域。 “分离”范围与正常范围不同,因为它不能从其父范围原型inheritance。 这在创build可重用组件时很有用,它不应该意外地读取或修改父范围中的数据。

已从https://code.angularjs.org/1.4.11/docs/api/ng/service/获得2017-02-13,编译#-scope-,许可为CC-by-SA 3.0

@:单向绑定

=:双向绑定

&:function绑定