ng-repeat内的ng-change导致角度误差

时间:2017-02-23 15:48:09

标签: angularjs angularjs-directive angular-components

我有一个角度组件,其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 partial中包含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,对吧?

感谢。

1 个答案:

答案 0 :(得分:0)

你不能在div上使用ng-change它只适用于复选框,广播,文本等输入元素。

要求ng-model ..即使用ng-change,您必须强制使用ng-model

在您的情况下使用ng-click

以下是ng-change的{​​{3}}。