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

<强> Demo