AngularJS自定義指令詳解（有分頁(yè)插件代碼）

2024-05-06 15:16:01

字體：大中小

來(lái)源：轉(zhuǎn)載

供稿：網(wǎng)友

前言

除了 AngularJS 內(nèi)置的指令外，我們還可以創(chuàng)建自定義指令。

通過(guò) .directive() 函數(shù)來(lái)添加自定義的指令。

調(diào)用自定義指令時(shí)，需要在HTMl 元素上添加自定義指令名。

自定義指令命名規(guī)則：使用駝峰命名法來(lái)命名，即除第一個(gè)單詞外的首字母需大寫(xiě)。如： myDirective。

在html頁(yè)面調(diào)用該指令時(shí)需要以 - 分割，如： my-directive。示例代碼：

<body ng-app="myApp"><my-directive></my-directive><script> var app = angular.module("myApp", []); app.directive("myDirective", function() {  return {   template : "<h1>模板：可以寫(xiě)自己的html頁(yè)面代碼</h1>"  }; });</script></body>

html頁(yè)面調(diào)用自定義指令的四種方式

通過(guò)在自定義指令里添加 restrict 屬性,根據(jù)設(shè)置不同的值來(lái)決定html頁(yè)面的調(diào)用方式，如：

var app = angular.module("myApp", []);app.directive("myDirective", function() { return {  restrict : "A",//只能通過(guò)屬性調(diào)用  template : "<h1>自定義指令!</h1>" };});

restrict值的不同，決定了調(diào)用方式的不同

屬性值	調(diào)用方式	示例
A （Attribute首字母）	屬性名	<div my-directive></div>
C （Class 首字母）	類(lèi)名	<div class='my-directive'></div>
E （Element 首字母）	元素名	<my-directive></my-directive>
M	注釋	<!-- 指令: my-directive>

restrict 默認(rèn)值為 EA, 即在html頁(yè)面可通過(guò)元素名和屬性名來(lái)調(diào)用自定義指令。

自定義指令屬性詳解

屬性	值類(lèi)型	說(shuō)明
restrict	string	指令的調(diào)用方式，A、C、E、M
priority	number	指令執(zhí)行的優(yōu)先級(jí)
template	string	指令使用的模板，可將html頁(yè)面代碼寫(xiě)于此。只能與templateUrl二選其一
templateUrl	string	從指定的url地址加載模板。只能與template二選其一
replace	boolean	是否用模板替換當(dāng)前元素。true : 將指令標(biāo)簽替換成temple中定義的內(nèi)容,頁(yè)面上不會(huì)再有<my-directive>標(biāo)簽；false ：則append（追加）在當(dāng)前元素上，即模板的內(nèi)容包在<my-directive>標(biāo)簽內(nèi)部。默認(rèn)false。
transclude	boolean	是否將當(dāng)前元素的內(nèi)容轉(zhuǎn)移到模板中
scope	boolean /object	指定指令的作用域。false(默認(rèn)值): 使用父作用域作為自己的作用域（每個(gè)引用自定義指令的標(biāo)簽若其中一個(gè)標(biāo)簽改變某一變量值，則會(huì)影響其他標(biāo)簽的值）。true: 新建一個(gè)作用域，該作用域繼承父作用域（兩個(gè)引用自定義指令的標(biāo)簽之間的變量互不影響）。JavaScript對(duì)象：與父作用域隔離，并指定可以從父作用域訪問(wèn)的變量
controller	function	定義與其他指令進(jìn)行交互的接口函數(shù)
require	string	指定需要依賴(lài)的其他指令
link	function	以編程的方式操作DOM，包括添加監(jiān)聽(tīng)器等
compile	function	編程的方式修改DOM模板的副本，可以返回鏈接函數(shù)