Question

我创建了一个自定义指令，它本质上是一个带有一些扩充标记的文本框。

string[] words2 = parser.ReadFields().Where(x => !string.IsNullOrEmpty(x)).ToArray();

模板文件：

module.directive("inputField", ["$log", function($log) {
    return {
      restrict: "E",
      replace: true,
      scope: {
        labelText: "@"
      },
      templateUrl: "input-field.template.html"
    }
  }]);

我希望我的指令支持添加标准的HTML5输入属性和Angular指令，并将它们应用于子输入。我通过将所选属性从父<div class="fancy-field"> {{ labelText }}: <input type="text"> </div>元素传递到指令的编译函数中的内部<div>来实现此目的。

<input>

这成功地将支持的属性和指令应用于compile: function(element, attributes) { var inputElement = $(element.children("input")[0]); if(attributes.innerDirective) { // Transfer the inner-directive element specified on the parent // to the child input inputElement.attr("inner-directive", attributes.innerDirective); // Remove the attribute specified on the outer element // in a futile attempt to keep the inner-directive // from applying to the outer div $(element).removeAttr("inner-directive"); delete attributes.innerDirective; delete attributes.$attr.innerDirective; } return {}; }，并且还从DOM中的外部元素中删除属性。但是，它不会阻止指令应用于内部和外部元素。我希望能够控制它，以便支持的输入指令（例如ng-pattern）可以传输到我的输入而不会对外部div产生任何副作用。我还想避免处理我不想使用的指令的不必要的开销。

我创建了一个Plunkr来演示这种行为。它记录到控制台以证明内部指令适用于内部和外部元素。

https://plnkr.co/edit/3qLt6mzcVkEcYbEHg81s

这可能以我描述的方式完成吗？我应该如何创建一个可以正确地将指令应用于其子节点的自定义指令？

Answer 1

我能够通过为我的指令设置高priority并将terminal设置为true来解决此问题。

  module.directive("inputField", ["$log", function($log) {
    return {
      restrict: "E",
      replace: true,
      priority: 1000,
      terminal: true
      // ... Rest of definintion ...
    }
  }]);

更高的优先级有助于确保首先处理我的input-field指令，terminal告诉angular停止编译优先级低于input-field的其余指令。这允许我推迟这些指令的实际处理，直到它们被转移到适当的子元素。

此更新的Plunker显示了修复操作：

https://plnkr.co/edit/NoUwGKn11oc86hbtqTik

将指令转移到子DOM元素

1 个答案: