angular指令中scope的绑定策略
2017-10-24 15:59
423 查看
angular指令中scope的绑定策略
scope的作用是让父与子的scope可以进行传递数据,它的绑定一般分为三种情况: @ :把当前属性作为字符串传递,还可以绑定来自外层scope上的值,在属性中插入{{}}即可; =: 与父scope中的属性进行双向绑定; &:传递一个来自父scope中的函数,稍后调用。
'@' 的使用
<person name="{{zhangsan}}"></person> <person name="{{lisi}}"></person> js部分: var app = angular.module('app',[]); app.controller('apCtrl',['$scope',function($scope){ $scope.zhangsan = '张三'; $scope.lisi = '李四'; $scope.greet = function(name,word){ console.log(name +'----'+word) }; }]) app.directive('person',function(){ return { replace: true, scope: { nameself:'@name' //此处的name是<person name="{{lisi}}"></person>的name,也就是{{lisi}} }, restrict:'E', template:'<div>姓名:{{nameself}} <input type="text" ng-model="nameself"></div>' } })
'=' 的使用
{{zhangsan}} {{lisi}} <person name="zhangsan"></person> <person name="lisi"></person> js部分: var app = angular.module('app',[]); app.controller('apCtrl',['$scope',function($scope){ $scope.zhangsan = '张三'; $scope.lisi = '李四'; $scope.greet = function(name,word){ console.log(name +'----'+word) }; }]) app.directive('person',function(){ return { replace: true, scope: { nameself:'=name' //此处的name父scope下的属性,实现双向绑定,子变父也变 }, restrict:'E', template:'<div>姓名:{{nameself}} <input type="text" ng-model="nameself"></div>' } })
'&' 的使用
{{zhangsan}} {{lisi}} <person name="zhangsan" greet="greet(name,word)"></person> <person name="lisi" greet="greet(name,word)"></person> var app = angular.module('app',[]); app.controller('apCtrl',['$scope',function($scope){ $scope.zhangsan = '张三'; $scope.lisi = '李四'; $scope.greet = function(name,word){ console.log(name +'----'+word) }; }]) app.directive('person',function(){ return { replace: true, scope: { nameself:'=name', greetself:'&greet' }, restrict:'E', template:'<div>姓名:{{nameself}} <input type="text" ng-model="word"><div ng-click="greetself({name: nameself,word:word})">click</div></div>' } })
相关文章推荐
- angular创建新指令directive中scope的作用以及绑定策略
- angularjs scope的绑定策略
- angular创建独立scope及绑定策略
- Angular学习心得之directive——scope选项与绑定策略
- angularjs的自定义directive指令的绑定策略scope:”@”、”=”、”&”
- Angular学习心得之directive——scope选项与绑定策略
- angular 指令中绑定父 scope 的方法
- Angular中directive——scope选项与绑定策略,这个也经常迷惑的。
- 【angular】指令及数据绑定入门
- angularjs 指令—— 绑定策略(@、=、&)
- AngularJS学习笔记之directive——scope选项与绑定策略
- --@angularJS--独立作用域scope绑定策略之=符策略
- angularjs指令之绑定策略(@、=、&)
- 【angular】指令及数据绑定入门
- angularjs指令的独立作用域和绑定策略
- AngularJs directive-scope双向绑定方法处理-实例2
- AngularJS学习笔记之directive——scope选项与绑定策略
- AngularJS中scope的绑定策略实例分析
- 浅谈angularjs中指令的三种绑定策略
- 【angular】指令及数据绑定入门