1.angualr指令

　　在angualr自己里面有許多豐富的指令，但都是平時所常見的，但對于自己所需要的可能有所欠缺，所以自己可能會摒棄原聲指令，自己封裝更為健壯靈活的指令；

　其實angular里面的指令也是基于下面所用到的步驟來創建的，只不過他都添加到了全局中，所以可以直接使用；

2.創建自定義指令

　　首先創建模塊app,再使用app的服務directive方法，

　　創建指令內容第一個參數自定義的名字，第二個參數是自定義參數屬性對象，該對象包括的屬性基本在代碼注釋解釋清楚；

　　

　　　　// a.創建模塊var app=angular.module('myApp',[]);// b.創建自定義指令// 第一個參數：指令的名字app.directive('myZhiling',[function(){var obj={restrict:'E',// A:attribue屬性,E:element元素標簽形式書，C:class以樣式名的形式書寫。M:comment注釋，以注釋的形式來書寫//template: '<ul><li>我叫小明</li></ul>',templateUrl:'./view.html', //指向一個文件，最終angualr會請求這個文件，把里面的//replace:true,//需要提供一個布爾值transclude:true,//需要提供一個布爾值scope:{//獲取自定義指令所在元素的屬性值suibian:'@term',//suibian這個屬性會拿到自定義標簽指令中屬性名為term的屬性值,@符號后面跟上屬性名，@只能是指令內傳過來的值。obj:'=grade',//=可以跟父控制器相互改變，雙向綁定method:'&'//這是簡寫方式，angualr會尋找屬性名為age的屬性，并拿到它的值，父控制器內的方法},link:function(scope,element,attributes){//相當于指令模板的控制器！//可以接受scope里面的屬性對象，然后再自己的控制器內處理，作用于指令的模板中，},controller:function(){}};return obj;}]);

　　

規則說明：

　　在scope里面的屬性，即是自定內傳進來的參數，可以是一個對象或是簡單的字符串內容，然后就會自動填充到我們指令所在模板的標簽位置；

　　指令的模板就是tamplateUrl所指向的文件內的內容；

　　link,controller本質的內容都是相對于指令所用到位置所在控制器的子控制器；

　　指令名駝峰命名，使用時要轉變成‘-’連接

　　scope內的多種不同符號的意義；

3.使用介紹：

在自己的項目中使用自己的指令，直接引入即可；

<my-zhiling obj="{name:'張三'}" term="不隨便">找小明</my-zhiling>

　　指令在接收到值或在link、controller內所控制到方法，數據等也會填充到指令模板的位置，從而才形成功能強大的指令

　　

?

轉載于:https://www.cnblogs.com/suzhen-2012/p/6648863.html

總結

以上是生活随笔為你收集整理的angular的自定义指令---详解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。