AngularJS中directive指令使用之事件绑定与指令交互用法示例
2016-11-22 11:42
921 查看
AngularJS中模板的使用,事件绑定以及指令与指令之间的交互
<!doctype html> <html ng-app="myapp"> <head> <meta charset="utf-8"/> </head> <body ng-controller="ShieldController"> <div> <who></who> </div> <div> <button you-btn></button> </div> <theshield reigns>343</theshield> <theshield reigns>fdhg</theshield> <theshield rollins>hhh</theshield> <theshield ambros>kkk</theshield> </body> <script src="./js/angular.min.js"></script> <script> var app = angular.module('myapp',[]); /*=======================1. 模板的使用 ========================*/ app.directive('who',function(){ return { restrict:"E", //元素element 的意思 link:function(scope,element,attrs){ console.log(element); element[0].innerHTML = 'sdfhkj'; //这个优先级别最高 }, //templateUrl:"param.html", //这个不显示 优先级别最低 template:"<h1>jkdhf</h1>" //这个显示 优先级别其次 }; }); /*=======================2. 事件的绑定 ========================*/ app.directive('youBtn',function(){ return { restrict:"A", //attribute 属性的意思 link:function(scope,element,attrs){ console.log(element); element[0].innerHTML = 'my btn'; //事件绑定 element.bind('mouseenter',function(){ element[0].innerHTML = 'your btn'; }); element.bind('mouseleave',function(){ element[0].innerHTML = 'her btn'; }); } }; }); /*=======================3. 元素 属性 控制器之间的交互========================*/ app.controller('ShieldController',function($scope){ $scope.shieldNames = []; this.addReigns = function(){ $scope.shieldNames.push("reigns:jjj"); } this.addRollins = function(){ $scope.shieldNames.push("Rollins:hhh"); } this.addAmbros = function(){ $scope.shieldNames.push("Ambros:ggg"); } }) .directive('reigns',function(){ return { require:"theshield", link:function(scope,element,attrs,ShieldController){ ShieldController.addReigns(); } }; }) .directive('rollins',function(){ return { require:"theshield", link:function(scope,element,attrs,ShieldController){ ShieldController.addRollins(); } }; }) .directive('ambros',function(){ return { require:"theshield", link:function(scope,element,attrs,ShieldController){ ShieldController.addAmbros(); } }; }) .directive('theshield',function(){ return { restrict:"E", controller:"ShieldController", //指定控制器 scope:{}, //清空该指令处的$scope 值 link:function(scope,element,attrs){ element.bind('mouseenter',function(){ //对于该指令所对应的元素绑定对应的事件 console.log(scope.shieldNames); }); } }; }); </script> </html>
希望本文所述对大家AngularJS程序设计有所帮助。
您可能感兴趣的文章:
相关文章推荐
- angularjs学习之六(angularjs中directive指令的一般编程事件绑定 模板使用等)
- angularjs学习之六(angularjs中directive指令的一般编程事件绑定 模板使用等)
- Angularjs中使用指令绑定点击事件的方法
- AngularJS的指令(Directive) compile和link的区别及使用示例
- Angularjs中使用指令绑定点击事件的方法
- Angularjs 1 中使用指令绑定点击事件
- 学习AngularJs:Directive指令用法(完整版)
- jquery移除、绑定、触发元素事件使用示例详解
- AngularJs:Directive指令用法
- 跟我学AngularJs:Directive指令用法解读(上)
- AngularJS事件绑定的使用详解
- AngularJS指令与指令之间的交互功能示例
- AngularJS之基础-4 DI(控制器参数、监听)、指令(模板包含、节点控制)、事件绑定
- 学习AngularJs:Directive指令用法
- 跟我学AngularJs:Directive指令用法解读(下)
- AngularJS指令与控制器之间的交互功能示例
- 学习AngularJs:Directive指令用法(完整版)
- jquery移除、绑定、触发元素事件使用示例详解
- 学习AngularJs:Directive指令用法(完整版)
- AngularJS 使用元素与事件指令