angular的自定义指令---详解
1.angualr指令
在angualr自己里面有許多豐富的指令,但都是平時所常見的,但對于自己所需要的可能有所欠缺,所以自己可能會摒棄原聲指令,自己封裝更為健壯靈活的指令;
其實angular里面的指令也是基于下面所用到的步驟來創(chuàng)建的,只不過他都添加到了全局中,所以可以直接使用;
2.創(chuàng)建自定義指令
首先創(chuàng)建模塊app,再使用app的服務(wù)directive方法,
創(chuàng)建指令內(nèi)容第一個參數(shù)自定義的名字,第二個參數(shù)是自定義參數(shù)屬性對象,該對象包括的屬性基本在代碼注釋解釋清楚;
// a.創(chuàng)建模塊var app=angular.module('myApp',[]);// b.創(chuàng)建自定義指令// 第一個參數(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', //指向一個文件,最終angualr會請求這個文件,把里面的//replace:true,//需要提供一個布爾值transclude:true,//需要提供一個布爾值scope:{//獲取自定義指令所在元素的屬性值suibian:'@term',//suibian這個屬性會拿到自定義標(biāo)簽指令中屬性名為term的屬性值,@符號后面跟上屬性名,@只能是指令內(nèi)傳過來的值。obj:'=grade',//=可以跟父控制器相互改變,雙向綁定method:'&'//這是簡寫方式,angualr會尋找屬性名為age的屬性,并拿到它的值,父控制器內(nèi)的方法},link:function(scope,element,attributes){//相當(dāng)于指令模板的控制器!//可以接受scope里面的屬性對象,然后再自己的控制器內(nèi)處理,作用于指令的模板中,},controller:function(){}};return obj;}]);
規(guī)則說明:
在scope里面的屬性,即是自定內(nèi)傳進來的參數(shù),可以是一個對象或是簡單的字符串內(nèi)容,然后就會自動填充到我們指令所在模板的標(biāo)簽位置;
指令的模板就是tamplateUrl所指向的文件內(nèi)的內(nèi)容;
link,controller本質(zhì)的內(nèi)容都是相對于指令所用到位置所在控制器的子控制器;
指令名駝峰命名,使用時要轉(zhuǎn)變成‘-’連接
scope內(nèi)的多種不同符號的意義;
3.使用介紹:
在自己的項目中使用自己的指令,直接引入即可;
<my-zhiling obj="{name:'張三'}" term="不隨便">找小明</my-zhiling>指令在接收到值或在link、controller內(nèi)所控制到方法,數(shù)據(jù)等也會填充到指令模板的位置,從而才形成功能強大的指令
?
轉(zhuǎn)載于:https://www.cnblogs.com/suzhen-2012/p/6648863.html
總結(jié)
以上是生活随笔為你收集整理的angular的自定义指令---详解的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Eclipse中tomcat更改部署路径
- 下一篇: livecd制作 centos