javascript - AngularJS：使用 Angular 属性指令将元素包装到自定义模板中

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>"
  }
});

演示