记录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 ------------------------------------