AngularJS中directive指令使用之事件绑定与指令交互用法示例

时间：2021-05-28

本文实例讲述了AngularJS中directive指令使用之事件绑定与指令交互用法。分享给大家供大家参考，具体如下：

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',[]); 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>" //这个显示 优先级别其次 }; }); 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'; }); } }; }); 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程序设计有所帮助。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章