1.angualr指令

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

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

2.創(chuàng)建自定義指令

　　首先創(chuàng)建模塊app,再使用app的服務(wù)directive方法，

　　創(chuàng)建指令內(nèi)容第一個(gè)參數(shù)自定義的名字，第二個(gè)參數(shù)是自定義參數(shù)屬性對(duì)象，該對(duì)象包括的屬性基本在代碼注釋解釋清楚；

　　

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

　　

規(guī)則說明：

　　在scope里面的屬性，即是自定內(nèi)傳進(jìn)來的參數(shù)，可以是一個(gè)對(duì)象或是簡(jiǎn)單的字符串內(nèi)容，然后就會(huì)自動(dòng)填充到我們指令所在模板的標(biāo)簽位置；

　　指令的模板就是tamplateUrl所指向的文件內(nèi)的內(nèi)容；

　　link,controller本質(zhì)的內(nèi)容都是相對(duì)于指令所用到位置所在控制器的子控制器；

　　指令名駝峰命名，使用時(shí)要轉(zhuǎn)變成‘-’連接

　　scope內(nèi)的多種不同符號(hào)的意義；

3.使用介紹：

在自己的項(xiàng)目中使用自己的指令，直接引入即可；

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

　　指令在接收到值或在link、controller內(nèi)所控制到方法，數(shù)據(jù)等也會(huì)填充到指令模板的位置，從而才形成功能強(qiáng)大的指令

　　

?

轉(zhuǎn)載于:https://www.cnblogs.com/suzhen-2012/p/6648863.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。