100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > angular中自定义指令时的scope中属性的绑定策略

angular中自定义指令时的scope中属性的绑定策略

时间:2019-09-15 22:29:22

相关推荐

angular中自定义指令时的scope中属性的绑定策略

在angular中自定时,scope可以设置为true, false(默认值), 一个对象。

1. 默认值false时,指令的作用域就是指令元素所在的作用域

2. 设置为true时,指令的作用域是从元素所在的作用域继承来的新作用域

3. 设置为一个对象时,产生一个隔离的作用域。

在使用隔离作用域的时候,属性有 = @ & 三种绑定策略

scope: {name: '=',age:'@',gen: '&'}

用 = 的时候,将本地属性name和指令元素所在作用域的属性进行双向绑定

用 @ 的时候,将本地属性agek和指令元素上的属性进行绑定

用 & 的时候,指令元素上的gen需要是个函数,作为回调函数

给个例子

<div ng-controller="MyController">name: <input type="text" ng-model="name" /><br>age: <input type="text" ng-model="age"> <br><div id="dir" my-directive name="name" age="{{age}}" gen="gen(h,s)"></div></div><script>app.controller('MyController', function($scope){$scope.gen = function (){console.log('------', arguments)}})app.directive('myDirective', function(){return {restrict: 'A',scope: {name: '=',age:'@',gen: '&'},template: '<div><hr/>name:<input type="text" ng-model="name" /><br>age:<input type="text" ng-model="age" /><br><input type="button" value="click me" ng-click="clo()" /></div>',link: function ($scope){$scope.clo = function () {//注意传参方式$scope.gen({s:123, h:564});}}};})</script>

以上是部分代码, ng-app部分没有给出

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。