AngularJS :使用角度属性指令将元素包装到自定义模板中

AngularJS : Wrapping an element into a custom template with an angular attribute directive

本文关键字：包装 元素 自定义 指令 属性 AngularJS      更新时间：2023-09-26

>情况：

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

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不起作用

这是褶皱机

您可能遇到了一个可能的错误。这是一个优先级和指令处理顺序问题。将指令的优先级设置为比 ng 模型更高的优先级。使用 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>"
  }
});

演示

相关文章：