anglejs – 以有角度的方式包装输入
|
我有想法将输入包装到自定义指令中,以保证在我的网站上的一致的外观和行为.我也想包装引导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”,如上例所示).这里的问题是,没有简单的方法可以访问转录元素,因为我想在日期戳的情况下添加自定义属性.我可以使用转录功能,然后重新编译链接函数中的模板,但这似乎有点复杂的这个任务.这也导致了转录范围和日期戳的切换状态的问题(一个在指令范围中,另一个在转义的范围内). 目前,我正在使用第二种方法,并在链接功能中生成模板,但我想知道有没有人有更好的想法！
这是我认为是正确的方法.像OP一样,我想要使用一个属性指令来包装一个输入.但是,我也希望它能够在不泄漏任何元素的情况下与ng-if等一起工作.正如@jantimon指出的那样,如果你没有清理你的包装元素,他们会在ng之后留下来,如果破坏了原始元素.
app.directive("checkboxWrapper",[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流打开原始元素而不引起注释标签泄漏为时已晚. （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |