将输入包装在角度指令中

我的想法是将输入包装到自定义指令中，以保证整个网站的外观和行为一致。我还想包装 bootstrap ui 的日期选择器和下拉菜单。此外，该指令应该处理验证并显示工具提示。

HTML 应该看起来像这样：

<my-input required max-length='5' model='text' placeholder='text' name='text'/>

or

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

我尝试了各种方法来实现这一目标，但总是遇到一些权衡：

1. 使用嵌入和替换将输入插入到指令 dom 结构中（在这种情况下，指令将被限制为“A”而不是上面示例中的“E”）。这里的问题是，没有简单的方法来访问嵌入的元素，因为我想在日期选择器的情况下添加自定义属性。我可以使用嵌入函数，然后在链接函数中重新编译模板，但这对于此任务来说似乎有点复杂。这也会导致日期选择器的嵌入范围和切换状态出现问题（一个在指令范围中，另一个在嵌入范围中）。

2. 仅使用替换。在这种情况下，所有属性都应用于最外层的div（即使我在编译函数中生成模板dom结构）。如果我仅使用输入作为模板，则属性位于输入上，但我需要在链接函数中生成模板，然后重新编译它。据我了解角度的​​阶段模型，我希望避免重新编译和更改链接函数中的模板dom（尽管我见过很多人这样做）。

目前我正在使用第二种方法并在链接函数中生成模板，但我想知道是否有人有更好的想法！

我认为这是执行此操作的正确方法。就像OP一样，我希望能够使用属性指令来包装input。但我也希望它能与ng-if等等，而不会泄漏任何元素。正如 @jantimon 指出的，如果您不清理包装元素，它们将在 ng-if 销毁原始元素后徘徊。

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();
        });
      }
    };
  }
]);

And 这是一个笨蛋 http://plnkr.co/edit/PUUJ6Y2vP1tCOMOWGYx2?p=preview你可以玩。

重要的: scope vs element$销毁。您必须将清理工作放入scope.$on("$destroy")并且不在element.on("$destroy")（这就是我最初尝试的）。如果您在后者（元素）中执行此操作，则“ngIf end”注释标记将被泄漏。这是由于 Angular 的 ngIf 在执行错误逻辑时如何清理其结束注释标签。通过将指令的清理代码放在 $destroy 范围内，您可以将 DOM 放回原样，就像包装输入之前一样，因此 ng-if 的清理代码很高兴。当 element.on("$destroy") 被调用时，在 ng-if falsey 流程中为时已晚，无法在不导致注释标记泄漏的情况下解开原始元素。