AngularJS中directive指令使用之事件绑定与指令交互用法示例
程序员文章站
2023-11-16 14:00:04
本文实例讲述了angularjs中directive指令使用之事件绑定与指令交互用法。分享给大家供大家参考,具体如下:
angularjs中模板的使用,事件绑定以及指令与...
本文实例讲述了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',[]); /*=======================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程序设计有所帮助。
上一篇: 网站降权原因知多少?
下一篇: APP营销策略:APP分类和营销模式