【问题标题】：AngularJS : Wrapping an element into a custom template with an angular attribute directiveAngularJS：使用角度属性指令将元素包装到自定义模板中
【发布时间】：2014-12-25 19:19:14
【问题描述】：

情况：

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

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

【问题讨论】：

我刚刚注意到的有趣的事情是这是您为another question 提供的答案吗？ :)
:)) 完全正确！我实际上是在使用我在那个答案中所说的话，直到我遇到了自己的问题！

标签： javascript angularjs angularjs-directive angular-ngmodel transclusion

【解决方案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

【讨论】：

谢谢。你能解释一下这个“bug”吗？