Angularjs 错误：$compile:multidir多指令资源争用

我有一个简单的指令，它在视图上呈现一个select字段。我得到下面的错误

当我删除“replace:true”时，它工作得很好

Error: $compile:multidir
Multiple Directive Resource Contention
Multiple directives [ngModel, ngModel] asking for 'ngModel on: {5}

代码如下：

(function () {

function YesNoDecline($timeout) {

    return {
        restrict: 'E',
        replace: true,
        template: '<select class="form-control" id="{{ ::id }}" name="{{ ::name }}" ng-model="ngModel.$viewValue"> ' +
                  '     <option ng-repeat="obj in data" value="{{ ::obj.value }}">{{ ::obj.text }}</option>' +
                  '</select>',
        require: 'ngModel',
        scope: {
            id: '@',
            name: '@',
            data: '=ds'
        },

        link: function (scope, element, attrs, ngModelCtrl) {

            scope.ngModel = ngModelCtrl;

        }
    };
};

YesNoDecline.$inject = ['$timeout'];
appModule.directive('yesNoDecline', YesNoDecline);
})();

（函数（）{
函数YesNoDeception（$timeout）{
返回{
限制：'E'，
替换：正确，
模板：“”+
“{{：：obj.text}}”+
'',
要求：'ngModel'，
范围：{
id:“@”，
名称：“@”，
数据：'=ds'
},
链接：函数（范围、元素、属性、ngModelCtrl）{
scope.ngModel=ngModelCtrl；
}
};
};
是拒绝。$inject=['$timeout']；
appModule.directive（'YesNoDecept'，YesNoDecept'）；
})();

因为您的yesnoDecept指令设置了

replace:true

，所以该指令绑定到其模板的最外层包含元素，在本例中是您的

元素。此select元素正在请求ng模型指令

我假设您的呼叫模板有一行类似于

。这导致在一个元素上请求两个ng model指令，但这不起作用。HTML不允许在一个元素上有两个相同的属性。有几种方法可以消除这种情况：

• 关闭

  replace:true

• 用

• 将require更改为

  require:'^^ng model'

  ，将调用代码更改为

• 将指令更改为不需要ng模型，而只是为其获取另一个参数。最后一个选项是唯一允许指令直接生成
  元素的选项