我有想法将输入包装到自定义指令中,以保证在我的网站上的一致的外观和行为.我也想包装引导ui的datepicker和下拉列表.此外,该指令应该处理验证并显示工具提示.
HTML应该是这样的：
<my-input required max-length='5' model='text' placeholder='text' name='text'/>
要么
<my-datepicker required model='start' placeholder='start' name='start'/>
在指令中,我想创建一个dom结构,如：
<div> <div>..</div> //display validation in here <div>..</div> //add button to toggle datepicker (or other stuff) in here <div>..</div> //add input field in here </div>
我尝试了各种方法来实现这一点,但总是遇到一些折中：
>使用转义和替换将输入插入到指令dom结构中(在这种情况下,该指令将被限制为“A”而不是“E”,如上例所示).这里的问题是,没有简单的方法可以访问转录元素,因为我想在日期戳的情况下添加自定义属性.我可以使用转录功能,然后重新编译链接函数中的模板,但这似乎有点复杂的这个任务.这也导致了转录范围和日期戳的切换状态的问题(一个在指令范围中,另一个在转义的范围内).
>仅使用替换.在这种情况下,所有属性都应用于最外层的div(即使在编译函数中生成模板dom结构).如果我只是使用输入作为模板,那么属性就在输入端,但是我需要在链接函数中生成模板,然后重新编译它.据我了解角度的相位模型,我想避免重新编译和更改链接函数中的模板dom(尽管我已经看到很多人这样做).
这是我认为是正确的方法.像OP一样,我想要使用一个属性指令来包装一个输入.但是,我也希望它能够在不泄漏任何元素的情况下与ng-if等一起工作.正如@jantimon指出的那样,如果你没有清理你的包装元素,他们会在ng之后留下来,如果破坏了原始元素.
原文链接：https://www.f2er.com/angularjs/142951.htmlapp.directive("check@R_301_460@Wrapper",[function() {
return {
restrict: "A",link: function(scope,element,attrs,ctrl,transclude) {
var wrapper = angular.element('<div class="wrapper">This input is wrappered</div>');
element.after(wrapper);
wrapper.prepend(element);
scope.$on("$destroy",function() {
wrapper.after(element);
wrapper.remove();
});
}
};
}
]);
和here’s a plunker你可以玩.
重要：scope vs element $destroy.你必须把你的清理放在范围内$on(“$destroy”)而不是在element.on(“$destroy”)(这是我最初尝试的).如果您在后者(元素)中执行此操作,则“ngIf end”注释标签将被泄露.这是由于Angular在做出其虚假逻辑时如何清理其结束评论标签.通过将您的指令的清理代码放在范围$destroy中,您可以像之前一样将DOM放回到输入之前,所以ng-if的清理代码很开心.当element.on(“$destroy”)被调用时,ng-if falsey流打开原始元素而不引起注释标签泄漏为时已晚.
