angular 自定義指令 詳解--restrict、restrict、replace
阿新 • • 發佈：2017-05-20
emp bold span 類型 ret space con 設置 註意
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 會報錯，所以，指令模板必須要有一個根元素包裹。
angular 自定義指令 詳解--restrict、restrict、replace