本文執行個體講述了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程式設計有所協助。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
