ng-repeat 中的 ng-change 导致 angular 错误

Question

我有一个 angular 组件，其 html 部分定义如下：

<div    ng-class="{'chiptag2': !$ctrl.tag.isNew, 'chiptag-placeholder': $ctrl.tag.isNew, 'highlighted-tag': $ctrl.tag.isSelected}"
        ng-change="$ctrl.onChipChange($ctrl.tag)"
        ng-focus="$ctrl.onChipFocus($ctrl.tag)"
        ng-blur="$ctrl.onChipBlur($ctrl.tag)"
        contenteditable>
{{$ctrl.tag.title}}
</div>

控制器有以下片段：

this.onChipFocus = function(tag){

    console.log('editableChipComponent onChipFocus for new tag');

};

this.onChipChange = function(tag){

    console.log('editableChipComponent onChipChange has '+tag.title);

};

this.onChipBlur = function(tag){

    console.log('editableChipComponent onChipBlur for '+tag.title);

};

组件在 ng-repeat 中的利用如下：

<editable-chip-component
        ng-repeat="tag in tagcategory.tags"
        tag="tag"
        bluemoon="$ctrl.toggleTagSelection(tag)"
></editable-chip-component>

如果我不在组件 html 部分中包含 ng-change 属性，一切正常。但是一旦我添加了 ng-change 然后 ng-repeat 在添加第一个项目后中断，并且控制台显示以下错误：

Error: [$compile:ctreq] http://errors.angularjs.org/1.6.1/$compile/ctreq?p0=ngModel&p1=ngChange
    at angular.js:38
    at V (angular.js:9722)
    at n (angular.js:9645)
    at g (angular.js:8881)
    at n (angular.js:9635)
    at angular.js:9980
    at angular.js:16648
    at m.$eval (angular.js:17972)
    at m.$digest (angular.js:17786)
    at m.$apply (angular.js:18080)

任何人都可以阐明这一点吗？我应该可以在 ng-repeat 中进行 ng-change，对吧？

谢谢。

Answer 1

您不能在 div 上使用 ng-change 它仅适用于 checkbox、radio、input box 等输入元素

它要求 ng-model，即要使用 ng-change，您必须强制使用 ng-model。

在你的情况下使用 ng-click.

这是 ng-change 的 Docs。

ng-repeat 中的 ng-change 导致 angular 错误

ng-change within ng-repeat causing an angular error

angularjs

angularjs-directive

angular-components