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

展开阅读全文
©️2019 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客
应支付0元
点击重新获取
扫码支付

支付成功即可阅读