Question

我有一个简单的指令，用于在视图上呈现选择字段。我收到以下错误。

当我删除＆＃34; replace：true＆＃34;时，它运作良好。

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);
})();

Answer 1

由于YesNoDecline指令设置了replace: true，因此该指令绑定到其模板的最外层元素，在本例中为<select>元素。这个select元素正在请求ng-model指令。

我认为您的调用模板有一行<yes-no-decline ng-model="myForm.myBool"></yes-no-decline>。这导致对一个元素的ng-model指令的2个请求，这不起作用。 HTML不允许您在元素上具有2个相同的属性。有几种方法可以消除这种情况：

关闭replace: true
使用<select>

<div>

将需求更改为require:'^^ng-model'，将您的调用代码更改为<div ng-model="myForm.myBool"><yes-no-decline></yes-no-decline></div>
将您的指令改为不需要ng-model，而只是为它添加另一个参数。最后一个选项是唯一允许您的指令直接生成<select>元素

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

1 个答案: