AngularJS指令详解(2)—指令与控制器之间的交互
2016-09-17 21:34
666 查看
本节我们来看控制器与指令之间的交互
1.首先来看最简单的,在指令中调用父控制器的方法:
在第一节中,我们已经知道了如何在指令的scope参数中调用父控制器中的方法,这里的:
也可以写成:
2.同一个指令,在动态调用多个父类控制器中的方法:
注意这里:
loadmore是小写,而在html中,属性是通过驼峰法则得到的。
1.首先来看最简单的,在指令中调用父控制器的方法:
<div ng-controller="myController1"> </div> app.controller('myController1',['$scope',function($scope){ $scope.load=function(){ console.log('正在加载数据......'); } }]); app.directive('myTest',function(){ return{ restrict:'E', link:function(scope,ele,attr){ ele.bind('mouseenter',function(){ scope.load(); }) } } })
在第一节中,我们已经知道了如何在指令的scope参数中调用父控制器中的方法,这里的:
scope.load();
也可以写成:
scope.$apply('load()');
2.同一个指令,在动态调用多个父类控制器中的方法:
<div ng-controller="myController1" loadMore="load1()"</div> <div ng-controller="myController2" loadMore="load2()"></div> app.controller('myController1',['$scope',function($scope){ $scope.load1=function(){ console.log('正在加载数据......'); } }]); app.controller('myController2',['$scope',function($scope){ $scope.load2=function(){ console.log('正在加载数据........'); } }]); app.directive('myTest',function(){ return{ restrict:'E', link:function(scope,ele,attr){ ele.bind('mouseenter',function(){ scope.$apply(attr.loadmore()) }) } } })
注意这里:
scope.$apply(attr.loadmore());
loadmore是小写,而在html中,属性是通过驼峰法则得到的。
相关文章推荐
- 详解angularjs中如何实现控制器和指令之间交互
- AngularJS指令与控制器之间的交互功能示例
- angularJS-指令与控制器之间的交互--“鼠标经过事件”如图所示
- --@angularJS--指令与控制器之间较复杂的交互demo2
- AngularJS指令详解(3)—指令与指令之间的交互
- --@angularJS--指令与控制器之间的交互demo
- angularjs中如何实现控制器和指令之间交互
- angularjs中如何实现控制器和指令之间交互
- angualrjs,指令和控制器之间的交互,实现指令的复用
- AngularJs-指令和控制器交互
- angularjs指令之间的数据交互
- AngularJS 指令的交互详解及实例代码
- AngularJS控制器之间的通信方式详解
- 指令与控制器之间的交互
- 指令和控制器之间的交互
- angularjs之间如何实现指令和指令之间的交互
- AngularJS控制器之间的数据共享及通信详解
- 我所理解的AngularJS指令和控制器的交互原理
- --@angularJS--指令与指令之间的交互demo
- AngularJs-指令和指令之间的交互(动感超人)