angularjs - 在 angular 指令中包装输入

Question

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

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>

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

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

仅使用替换。在这种情况下，所有属性都应用于最外层的 div(即使我在 compile 函数中生成模板 dom 结构)。如果我只使用输入作为模板，那么属性在输入上，但我需要在链接函数中生成模板，然后重新编译它。据我了解angular的阶段模型，我想避免重新编译和更改链接函数中的模板dom(虽然我已经看到很多人这样做了)。

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

Answer 1

这是我认为执行此操作的正确方法。像 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();
        });
      }
    };
  }
]);

和 here's a plunker你可以玩。

重要信息 : scope对比 element $销毁。您必须将清理工作放在 scope.$on("$destroy") 中而不是在 element.on("$destroy") (这是我最初尝试的)。如果你在后者(元素)中这样做，那么“ngIf end”注释标签将被泄露。这是由于 Angular 的 ngIf 在执行其虚假逻辑时如何清理其结束注释标签。通过将指令的清理代码放在 $destroy 范围内，您可以将 DOM 放回原样，就像包装输入之前一样，因此 ng-if 的清理代码很高兴。到 element.on("$destroy") 被调用时，在 ng-if falsey 流中解包原始元素而不会导致注释标记泄漏为时已晚。