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 會報錯,所以,指令模板必須要有一個根元素包裹。