如何从 AngularJS 中的元素指令中删除属性指令？答案

【问题标题】：How to remove attribute directives from element directive in AngularJS?如何从 AngularJS 中的元素指令中删除属性指令？
【发布时间】：2015-06-06 03:40:12
【问题描述】：

我有一个元素指令和一个属性指令：

<my-element my-attribute="value"></my-element>

my-attribute 是一个需要 ngModel 的指令：

    app.directive('myAttribute', [
    function() {

        var definition = {
            restrict: 'A',
            require: 'ngModel',
            link: function ($scope, $element, $attrs, ctrl) {...}
}
return definition;

my-element 可以在没有 ng-model 的情况下使用，但 my-element 的模板包含输入，该输入始终具有 ng-model。 my-attribute 应该从 my-element 中删除并添加到 my-element 内的输入中。在我的元素指令中的编译函数中，我有：

var value = element.attr('my-attribute');
element.remove('my-attribute'); 
element.find('input').attr('my-attribute', value);

当属性指令没有要求时，它可以正常工作：'ngModel'。但如果我需要 ngModel，我会得到：

错误：找不到指令“myAttribute”所需的控制器“ngModel”！

为什么？我该如何解决这个问题？

【问题讨论】：

错误很明显或者我没有得到问题
我的属性被我的元素从我的元素中删除，并添加到具有 ngModel 的我的元素中的输入
但即使在 angular 替换了您的指令 html 之前，它也会验证是否满足 require 属性...此时，您的指令属性中没有 ng-model...因此错误

标签： angularjs angularjs-directive

【解决方案1】：

当您拥有require: 'ngModel' 时，如果该指令所在的元素上没有ng-model 属性，您将收到错误消息——这就是该指令属性的含义。它说“给我 ngModel 控制器的控制器，作为链接函数中的第四个参数。

为避免这种情况，如果您不总是需要使用它，您可以在ngModel 之前添加一个? 符号，这意味着它是可选的：

....
require: '?ngModel',
....

【讨论】：

【解决方案2】：

如果你想删除一个属性，你应该使用

element.removeAttr('my-attribute');

我不确定您在链接函数中的意图，但您可以让myAttribute 中的链接函数仅在元素上有 ng-model 属性时运行：

require: 'ngModel',
compile: function(el, attr) {
    if (attr.ngModel) {
        return function(scope, elm, attr, ngModel) {
            // link function
        }
    }
}

这是可能的，因为 Angular 在执行该指令的链接函数之前不会尝试找到所需的指令。

【讨论】：