前面有篇文章我已經簡單的介紹了angular的指令，我們來看看。
angular有一個強大的功能就是指令，它可以改變頁面的DOM，像ng-app、ng-controller、ng-click等都是指令，我們還可以建立自己的指令，如下：
<html><head> <link href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"> <script src="//cdn.bootcss.com/angular.js/1.3.17/angular.js"></script> <script type="text/javascript"> var app = angular.module('app',[]); app.controller('Ctrl',function ($scope,$interval) {}); app.directive('newEle',function () { return { link: function($scope,element,attr){ element.bind('click',function () { alert(11) }) }, template:'<p>這是指令建立的元素</p>' } }) </script></head><body ng-app = 'app'> <div ng-controller='Ctrl'> <p>頁面的元素</p> <new-ele></new-ele> <div new-ele></div> </div></body></html>
效果如下：
兩種方式都可以綁定指令，直接建立html標籤和給標籤屬性，同時點擊新建立的元素可以執行綁定的事件。
值得注意的是：綁定指令的時候不能使用駝峰命名，要使用串連符”-“。
angular裡其實可以指令套指令，也就是說在我們建立的指令裡面繼續添加我們想要的指令，以滿足我們複雜的需求，首先上代碼：
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Document</title> <link href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"> <script src="http://cdn.bootcss.com/angular.js/1.4.4/angular.js"></script> <script> angular.module('demo',[]) .directive('box',function(){ return{ controller:function(){ this.setBigWidth = function(ele){ ele[0].style.width = '100px'; } this.setBigHeight = function(ele){ ele[0].style.height = '100px'; } this.setBg = function(ele){ ele[0].style.background = 'red'; } } } }) .directive('bigwidth',function(){ return{ require:'box', link:function(scope,ele,attr,boxCtrl){ ele.bind('mouseenter',function(){ boxCtrl.setBigWidth(ele); }) } } }) .directive('bigheight',function(){ return{ require:'box', link:function(scope,ele,attr,boxCtrl){ ele.bind('mouseenter',function(){ boxCtrl.setBigHeight(ele); }) } } }) .directive('red',function(){ return{ require:'box', link:function(scope,ele,attr,boxCtrl){ ele.bind('mouseenter',function(){ boxCtrl.setBg(ele); }) } } }) </script> <style> div{margin: 50px;width: 50px;height: 50px;border: 1px solid #ccc;} </style></head><body ng-app='demo'> <div box bigWidth></div> <div box bigWidth bigHeight></div> <div box bigWidth bigHeight red></div></body></html>
效果圖如下：
初始效果是這樣：
滑鼠依次放入三個div後的效果是這樣：
分析代碼，我們把指令box看做是父指令，在它裡面有一個controller方法體，controller方法體裡面的方法是開放的，可以供引用它的指令調用，我們在裡面分別寫了三種操作DOM的函數。在下面三個子指令裡面，我們首先引用父指令，使用require，然後使用link方法給元素繫結事件，在事件裡面我們可以使用父指令裡面定義好的函數，注意，link方法的第四個參數就是指向父指令的controller方法體。
最後一點需要注意的是，這應該是angular的一個小坑，在我們命名指令的時候，即使我們html裡面使用了駝峰命名法，在這裡也一律使用小寫，如上面的指令bigWidth，在html中使用的駝峰，在js中使用的是小寫
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
