《AngularJS》--指令的相互调用
来源:互联网 发布:东德歧视中国人知乎 编辑:程序博客网 时间:2024/05/29 19:43
人们喜欢AngularJS,因为他很有特色,其中他的指令和双向数据绑定很吸引着人们,那么,AngularJS的指令有什么作用哪?指令之间的是怎样相互调用的哪?
下面有一个小小的Demo,写的是AngularJS指令之间的相互调用,大家看一下。这个Demo是这样的,页面上有三个div,每个div绑定不同的指令,当我们用鼠标滑过三个div时以触发不同的事件。
HTML代码
<!DOCTYPE html><html lang="en" ng-app="MyModule"><head> <meta charset="UTF-8"> <title></title></head><body> <div class="row"> <div class="col-md-3"> <superman strength> 动感超人 力量</superman> </div> </div> <div class="row"> <div class="col-md-3"> <superman strength speed> 动感超人 力量 速度 </superman> </div> </div> <div class="row"> <div class="col-md-3"> <superman strength speed light> 动感超人 力量 速度 发光</superman> </div> </div></body><script src="angular-1.3.0.14/angular.js"></script><script src="superman.js"></script></html>JS代码
var myModule=angular.module("MyModule",[]);myModule.directive("superman",function(){ return{ scope:{}, restrict:'AE', controller:function($scope){ $scope.abilities=[]; this.addStrength=function(){ $scope.abilities.push("strength"); }; this.addSpeed=function(){ $scope.abilities.push("speed"); }; this.addLight=function(){ $scope.abilities.push("light"); }; }, link:function(scope,element,attrs){ element.addClass('btn btn-primary'); element.bind("mouseenter",function(){ alert(scope.abilities); }) } }});myModule.directive("strength",function(){ return{ require:'^superman', link: function (scope, element, attrs, supermanCtrl) { supermanCtrl.addStrength(); } }});myModule.directive("speed",function(){ return{ require:'^superman', link: function (scope, element, attrs, supermanCtrl) { supermanCtrl.addSpeed(); } }})myModule.directive("light",function(){ return{ require:'^superman', link: function (scope, element, attrs, supermanCtrl) { supermanCtrl.addLight(); } }})
在上面的HTML标签中,我们看见了在每个div中,都有自定义的标签,像<superman>、<speed>、<light>等等, 我们可以给这些标签绑定特殊的一些功能,我们需要每个标签绑定的功能不一样,这时候,我们就用到ng-Controller和directive了,其中superman指令中的Controller里面定义了很多方法,这些方法就能提供给外面的一些指令使用,这样就能形成指令的嵌套使用。
0 0
- 《AngularJS》--指令的相互调用
- angularJS 自定义指令间的相互交互
- angularjs的自定义指令及其调用方式
- AngularJs 的指令
- angularjs指令的使用
- AngularJS 风谲云诡的指令
- AngularJS 大雅之堂的指令
- angularjs的指令详解
- AngularJS 内置的指令
- 理解Angularjs的指令
- AngularJS的指令
- AngularJS的常见指令
- AngularJS的指令
- angularjs指令的&=@<?
- angularjs利用指令调用ueditor百度编辑器
- AngularJS 优雅的自定义指令
- Angularjs 几个指令的坑
- angularjs自定义指令的用法
- lcd-Display_font.c
- 《python简明教程》学习笔记(1)-tuple和list
- 开源Math.NET基础数学类库使用(02)矩阵向量计算
- 如何解决Sublime Text 3不能正确显示中文的问题
- Android Studio如何导入第三方工程包
- 《AngularJS》--指令的相互调用
- [__NSCFString ma_MD5String]: unrecognized selector sent to instance 0x7ffeb34aaa80'
- POJ 3368 Frequent values(线段树区间合并)
- sql server 2008r2安装注意的问题
- set集合
- C#.net 环境下使用OpenCV
- [个人草稿,请忽略]convention需求
- Jfinal小结
- 我的初学笔记