AngularJs-指令和控制器交互
来源:互联网 发布:青年政治学院 知乎 编辑:程序博客网 时间:2024/05/16 17:45
AngularJs-指令和控制器交互
前言:
前段时间我们学习了angular的指令,他通过ECMA的方式创建元素,可以让我们共用这些元素,我们也知道可以通过 link的方法给这个指令添加一些动作事件,本节,我们将写入和让angular的指令能和控制器进行交互。
1,指令和控制器的交互
<!DOCTYPE html><html ng-app="MyController"><head> <meta charset="utf-8"> <title>指令复用</title></head><body> <div ng-controller="MyCtrl"> <loader>滑动加载</loader> </div></body><script src="js/angular-1.3.0.js"></script><script src="js/directive-controller.js"></script></html>
上面的代码平淡无奇,有个控制器有个指令(loader),下面可以看到我们通过 directive创建了这个指令,并且我们通过link的方法给他赋值鼠标事件(mouseenter)。
var myModule = angular.module('MyController',[]);myModule.controller('MyCtrl',function($scope){ $scope.loadData = function(){ console.log("加载数据..."); }})myModule.directive('loader',function(){ return{ restrict:'AE', link:function(scope,element,attr){ element.bind('mouseenter',function(){ scope.loadData(); }) } }})
我们来看看运行的结果,ok,我们打印出来 ”加载数据...“。
2,多个控制器如何公用一个指令?
我们创建指令的目的就是在于,能够复用它,当然这也是MVC的终极思想。
我们的代码也发生了一些变化
<!DOCTYPE html><html ng-app="MyController"><head> <meta charset="utf-8"> <title>指令复用</title></head><body> <div ng-controller="MyCtrl"> <loader loadDataFn="loadData()">滑动加载</loader> </div> <div ng-controller="MyCtr2"> <loader loadDataFn="loadData2()">滑动加载2</loader> </div></body><script src="js/angular-1.3.0.js"></script><script src="js/directive-controller.js"></script></html>
首先,我们创建了两个控制器 MyCtr1 和 MyCtr2,同时呢,我们给 loader 这个指令,加了一个自定义的属性叫 loadDataFn,给他赋的值是下面js中的两个对应控制器中的方法loadData()和loadData2();
var myModule = angular.module('MyController',[]);myModule.controller('MyCtrl',function($scope){ $scope.loadData = function(){ console.log("加载数据..."); }})myModule.controller('MyCtr2',function($scope){ $scope.loadData2 = function(){ console.log("加载数据2..."); }})myModule.directive('loader',function(){ return{ restrict:'AE', link:function(scope,element,attr){ element.bind('mouseenter',function(){ // scope.loadData(); // scope.$apply("loadData()"); scope.$apply(attr.loaddatafn); }) } }})
当然,在指令的 link方法中我们也做了改变,link方法呢,给我提供了四个参数:scope、element、attr和父控制器。我们给元素绑定事件也是通过参数中的 element.bind()完成的,我们也可以通过 attr 属性获取指令上的属性,然后通过$apply的方法来完成调用就好了。在此要提交大家的是,我们在获取指令元素上的属性的时候,一定要注意,我们要把属性的名字写成小写的,这是angularJS的坑。
阅读全文
0 0
- AngularJs-指令和控制器交互
- AngularJs-指令和控制器交互
- angularjs中如何实现控制器和指令之间交互
- angularjs中如何实现控制器和指令之间交互
- 我所理解的AngularJS指令和控制器的交互原理
- angularjs指令详细分析&&与控制器数据交互
- 指令和控制器之间的交互
- angularjs指令-控制器
- AngularJS指令详解(2)—指令与控制器之间的交互
- angularjs之间如何实现指令和指令之间的交互
- angularjs之间如何实现指令和指令之间的交互
- angularJS-指令与控制器之间的交互--“鼠标经过事件”如图所示
- 指令与控制器交互,指令与指令交互
- AngularJS-模型和控制器
- 【AngularJs】模块和控制器
- AngularJS入门 、AngularJS控制器 、AngularJS常见的内置指令
- AngularJS入门 AngularJS控制器 AngularJS常见内置指令
- angualrjs,指令和控制器之间的交互,实现指令的复用
- boost在Android平台的编译ubuntu16.04 ndk-r15
- Android
- 算法期中1002. 合并二叉树
- 工作小窍门;)
- 基于Java的Spark WordCount编程实现
- AngularJs-指令和控制器交互
- 情感分析
- SSM框架-MyBatis进阶篇(一)
- MVP+XRecyclerView+okhttp+glide,列表或者网格显示所加载的数据
- 计算1*2*3*+3*4*5+……+99*100*101的值
- Python中filter()实现找回文数字
- HDU 1074 Doing Homework(状压dp+记录路径)
- Excel地图插件v1.2版本发布
- /etc/ld.so.conf文件