首頁 >web前端 >js教程 >AngularJs自訂指令可以如何來設定以及自訂指令的命名規範

AngularJs自訂指令可以如何來設定以及自訂指令的命名規範

不言原創: 2018-07-21 16:27:241758瀏覽

AngularJS為我們提供了自訂指令的功能，透過此功能，我們可以自訂一些標籤，為我們自己的開發來提供幫助。下面的內容我將給大家分享關於AngularJs透過directive和restrict來設定自訂指令的方法。

一、AngularJs自訂指令directive的restrict屬性說明：

今天公用的html部分：

<h1 zym-blog></h1>

JavaScript部分：

var m = angular.module(&#39;app&#39;, []);
m.directive(&#39;zymBlog&#39;, [function(){
	return {
		restrict : &#39;AEC&#39;,
		template : &#39;<p>hello world</p>&#39;,
		replace : true
	};
}]);

透過directive設定自訂指令，第一個參數是指令名稱，第二個參數是數組，包含一個回呼函數，函數的返回值是一個json對象，其中：

restrict表示指令的形式：A是屬性、E是元素、C是class類，為了避免和style中的class類混淆，不建議使用C。

template是模板內容，表示使用這個自訂屬性的標籤中要插入的內容。

replace的值預設是false，如果是true，表示要用templace中的標籤取代html程式碼中使用這個自訂指令的標籤。注意，如果使用replace，那麼template中必須包含html元素，不能只是幾個文字，否則angular會報錯。

下面再來看一個屬性，templateUrl和template不能同時出現，templateUrl是引用的模板位址：

var m = angular.module(&#39;app&#39;, []);
m.directive(&#39;zymBlog&#39;, [function(){
	return {
		restrict : &#39;AEC&#39;,
		templateUrl : &#39;./46-1.html&#39;,
		replace : true
	};
}]);

注意，因為這裡使用了replace，所以templateUrl對應的模板內容中必須包含html標籤元素。

二、自訂指令的標準命名規格：

directive指令名稱用駝峰命名法，例如【zymBlog】，那麼在html程式碼中進行呼叫時，需要在大寫字母之前加上橫槓，例如【zym-blog】。

三、自訂指令template函數式運算：

template不但可以是字串，也可以是函數，例如：

var m = angular.module(&#39;app&#39;, []);
m.directive(&#39;zymBlog&#39;, [function(){
	return {
		restrict : &#39;AEC&#39;,
		template : function(){
			return &#39;<p>赵一鸣个人技术博客</p>&#39;;
		},
		replace : true
	};
}]);

四、自訂指令transclude屬性：

有一種情況，在html中使用了自訂指令，但是標籤內部原來就有內容，這樣的話，自訂指令裡邊的內容會把標籤原來的內容替換掉，所以需要一個增加一個屬性來解決這個問題（ng-transclude）：

html部分：

<h1 zym-blog>赵一鸣博客http://www.zymseo.com</h1>

js部分：

var m = angular.module(&#39;app&#39;, []);
m.directive(&#39;zymBlog&#39;, [function(){
	return {
		restrict : &#39;AEC&#39;,
		template : function(){
			return &#39;<p>赵一鸣AngularJs学习笔记<span ng-transclude></span></p>&#39;;
		},
		replace : true,
		transclude : true
	};
}]);

設定ng-transclude的值為true之後，還必須在自訂指令的內部再加入一個標籤，並且制定ng-transclude，這樣是把原來html標籤裡邊的內容放到這個標籤裡邊！

AngularJs自訂指令可以如何來設定以及自訂指令的命名規範

相關文章