停止在我的自定义元素指令上执行其他指令

Question

我有一个自定义元素指令，例如如下所示

  <my-wrapper ng-model="values.abc" unique-check="" list="list" prop="name"> </my-wrapper>

该指令确实需要 ng-model，稍后将在内部输入标签上设置它

  <input type="text" name="myfield" ng-model="'+attrs.ngModel+'"/>

发生的问题是当我检查控制台时，我可以看到指令上的 ng-model 与输入标签上的 ng-model 不同。

如何确保未创建外部标记上的 ng-model 并且它仅在我的指令中创建一次。

我的指令代码如下

app.directive("myWrapper", function(){

  var templateFn = function(element, attrs){
    return '<div ng-form="myform">'+
          '<input type="text" name="myfield" ng-model="'+attrs.ngModel+'"/>'+
          '<span>(inside directive) : isDuplicate:{{myform.myfield.$error.isDuplicate}}</span>'
          '</div>';
  }

  return {
    restrict :'E',
    template : templateFn,
    require: 'ngModel',
    scope: true
  }
});

请注意，以上只是我的指令的简化版本，我保留了 scope: true 因为整体场景的要求。

如果不清楚我在说什么，请查看THIS PLUNKER的控制台

我尝试了使用terminal : true 和/或priority : 1001 的解决方案，以便不会在指令html 上创建ng-model，而是仅在输入标签上创建ng-model，但它们都不起作用。

是的，一种解决方案是用指令上的 my-model 替换 ng-model，然后在输入标签上再次将其添加为 ng-model，但随后它在我的应用程序中的近 1000 个地方使用，所以真的不想这样替换它。

解决此问题的任何其他方法。

Answer 1

所以try this plunker。基本上我让my-wrapper 指令通过它的简单属性传递到它的输入标签上。对于需要解析的属性，我只是简单的解析并注入到my-wrapper指令创建的作用域中。

我不太清楚为什么你有一个指令将表单包裹在单个输入周围，但就像你说的那样，这是一个人为的例子。就个人而言，我会改变这种结构，但我尽量不要太破坏性。

希望这会有所帮助。也许您可以解释一下您的意图。

Answer 2

您可以尝试使用嵌入。与其尝试突破标准 AngularJS 编译的困难部分，不如将结构更改为：

<my-wrapper>
    <input name="..." ng-model="...">
</my-wrapper>

并让您的指令将包装器扩展到您的模板中，并在其中包含嵌入的输入。 （请参阅$compile documentation 中的transclude 选项。）这也会增加模板的可读性。

---

或者，如果您需要您的指令生成复杂的内容（多个输入等），所有内容都被封装并绑定到单个 ng-model，您可以将 ng-model 保留在原处，并使您的指令完全封装。我的意思是这样的：

.directive('myComplexField', function () {
    return {
        scope: {},
        require: 'ngModel',
        link: function ($scope, $element, $attrs, ngModelCtrl) {
            ngModelCtrl.$formatters.push(function (modelValue) {
                // ... (update your isolated model based on external model change)
            });
            ngModelCtrl.$parsers.push(function (viewValue) {
                // ... (update external model based on your isolated model)
            });
            $scope.$watch('... (properties of your isolated model)', function () {
                // force sync (parser code above will take care of setting the real value)
                ngModelCtrl.$setViewValue(!ngModelCtrl.$viewValue);
            });
        }
    };
})

（请参阅ngModelController documentation）。您只需要注意不要在$parser 和$formatter 之间创建无限循环。

---

如果您真的不喜欢将ng-model 留在包装器上并使用priority 和terminal 跳过它，那就是pretty simple：

.directive('foo', function ($compile, $timeout) {
    return {
        restrict: 'E',
        priority: 2,  // ngModel priority is 1 (see the docs)
        terminal: true,
        link: function ($scope, $element) {
            $compile($element, undefined, 1)($scope);  // compiles priority *lower than 1*
        }
    };
}

应该尽可能避免这种方法，因为它有很多明显的缺点，没有真正的好处。