在自定义指令的作用域绑定中使用符号'@','&','='和'>':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一个客户指令时,指令的范围可以在隔离范围内,这意味着指令不与控制器共享范围。 指令和控制器都有自己的范围。 但是,数据可以通过三种可能的方式传递给指令范围。
- 数据可以作为string传递,使用
@
string,传递string值,单向绑定。 - 数据可以作为一个对象使用
=
string,传递对象,2种方式绑定传递。 - 数据可以作为
&
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绑定