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