angular 自定義指令 詳解--restrict、restrict、replace


Angularjs 允許根據實際業務需要自定義指令, 通過angular全局對象下的 directive 方法實現。可以自定義屬性、自定義標簽、自定義功能

接下來定義一個名叫custom的指令,並利用這個自定義指令來實現元素的替換

html代碼:

<body ng-app="app">
<p custom></p>
<custom></custom>

js代碼:

 var app = angular.module("app",[]);
    //自定義指令和定義控制器相似
    app.directive("custom",[function () {
        return{  //返回指令對象            
            restrict:"EA",
            template:"<h1>這是第一個自定義指令模板<p>p標簽元素</p></h1> ",
            replace:true, 

} }])

directive:表示我們要定義一個自定義的指令,指令的名稱為 custom,后面的函數用來定義指令的特征, 回調函數中返回的是一個指令對象

restrict:是指令的類型,有四種取值:

     ①   E:以元素的方式出現

     ②   A:以屬性的方式出現

     ③   C:以類的方式出現(用的比較少)

     ④   M:以注釋的方式(用的少)

template:是指令模板

replace:顧名思義,這是替換的意思,默認為 false,就是將模版的內容追加到元素中,如果設置為 true,那么模版的內容將會替換元素的內容

這里有一個注意點,如果

  template:"<h1>這是第一個自定義指令模板</h1><p>p標簽元素</p> ",
  replace:true,

這種情況下,沒有包裹的根元素,h1 和 p是同級元素的情況下,使用 replace:true 會報錯,所以,指令模板必須要有一個根元素包裹。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM