記錄angular directive小報錯以及多節點包含，單節點替換的測試過程

directive報錯的問題小記

今天遇到了這個問題，遂記錄下有幾處需要注意的地方。後續多處報錯都是這個錯誤顯示。

首先

1、return不能爲空，否則$compile報錯

自定指令沒有返回時（代碼如下），報下面這個編譯錯誤。如在調式過程，會影響整體輸出效果。

2、擴展的html標籤能正常顯示的簡單規則

本來知道templateUrl是如此，html裏面只接收一個元素節點，但沒注意過template，而template比較靈活，也可接受多節點。

簡單規則就是

1、可 包含（replace:false）多個節點 (dom存在多個平級node)
2、只 替換 (replace:true) 單個節點（dom只含一個最外層node）

或者說

單個元素可替換和包含，多個元素只允許包含

這個意思就是包含方式編譯的話包多少個，多少層都無所謂，反正都包進去了。替換方式的話，原本我就一個擴展的元素杵那兒，你就拿一個跟我換，不能多佔了。

這兩個規則很符合思考邏輯，其實也不用代碼測試。下面給需要的人看。

------------------------------------------------------ 開始測試1和2 ------------------------------------

測試html

<website-input></website-input>

測試案例1：

可包含（replace:false）多個節點(dom存在多個平級node)

測試js

function messageWebsiteInputDom($compile){
	let dom = 'hahaha <input/> <span> lalalal </span>';
	return {
		scope:true,
		restrict:'E',
		template:dom,
//		replace:true,   //replace:true若打開會報錯
		link:function(scope,ele,attr){
			ele.html(dom);
			$compile(ele.contents())(scope);
		}
		
	}
}

成功

測試案例2：

只 替換 (replace:true) 單個節點（dom只含一個最外層node）

function messageWebsiteInputDom($compile){
	let dom1 = '<span> lalalal </span>';//成功
	let dom2 = 'hahaha <input/> <span> lalalal </span>'; //報錯
	return {
		scope:true,
		restrict:'E',  
		template:dom,   //dom1或者dom2
		replace:true,   //替換原元素
		link:function(scope,ele,attr){
			ele.html(dom);
			$compile(ele.contents())(scope);
		}
	}
}

更換以 屬性 方式擴展（restrict:‘A’）

<div website-input item="{{nowItem}}"></div>

屬性方式也遵循前面兩個規則，包含可以很多個，替換隻能一個

測試案例3

成功

function messageWebsiteInputDom($compile){
	let dom = 'hahaha <input/> <span> lalalal </span>';
	return {
		scope:true,
		restrict:'A',
		template:dom,
//		replace:true,    //打開會導致失敗
		link:function(scope,ele,attr){
			ele.html(dom);
			$compile(ele.contents())(scope);
		}
		
	}
}

解析後的頁面代碼（文本、空格全都被解析成node）

<div website-input="" item="" class="ng-scope">
	<span class="ng-scope">hahaha </span>
	<input class="ng-scope">    
	<span class="ng-scope"> lalalal </span>
</div>

測試案例4

成功

function messageWebsiteInputDom($compile){
	let dom = '<span> lalalal </span>';
	return {
		scope:true,
		restrict:'A',
		template:dom,
		replace:true,
		link:function(scope,ele,attr){
			ele.html(dom);
			$compile(ele.contents())(scope);
		}
		
	}

}

解析後頁面代碼（div被替換成span，其他屬性不變，dom被插入）

<span website-input="" item="" class="ng-scope">
	<span class="ng-scope"> lalalal </span>
</span>

------------------------------------------------------ 結束 測試1和2 ------------------------------------