javascript - Angular : Wrapping an element into a custom template with an angular attribute directive

Question

情况:

我有一个属性指令，将它的元素包装到一个模板中。在这里:

app.directive("myCustomInput", function(){
  return{
    restrict: "A",
    replace: true,
    scope:{},
    transclude: "element",
    template: "<div class='input-wrap'>"+
    "<div ng-transclude></div>"+
    "<i class='glyphicon glyphicon-chevron-down'></i>"+
    "</div>"
  }
});

我这样使用它:

<input my-custom-input ng-model="data.input" type="text" />

问题:

ng-model 不起作用

这是plunker

Answer 1

您可能遇到了一个可能的错误。这是一个优先级和指令性的处理顺序问题。将您的指令设置为比 ng-model 更高的优先级。使用 1.2 v 时，ng-model 的默认优先级为 0，而 1.3 版本 ng-model 的优先级为 1。因此，让您的指令具有比 ng-model 更高的优先级，以便指令和包含发生在 ng-model 处理指令呈现之前的输入之前。

.directive("myCustomInput", function(){
  return{
    restrict: "A",
    replace: true,
    scope:{},
    priority: 1, //Here set the priority
    transclude: "element",
    template: "<div class='input-wrap'>"+
    "<div ng-transclude></div>"+
    "<i class='glyphicon glyphicon-chevron-down'></i>"+
    "</div>"
  }
});

Demo