次の例で何が起こっているのかわかりません。配列がある独自のディレクティブで独自の検証を作成しようとしているだけrequired
で、それを必須にしたい(これは私がやりたいことの単純化ですが、要点を示すのに十分です)
フィドラー: http://jsfiddle.net/gsubiran/p3zxkqwe/3/
angular.module('myApp', [])
.directive('myDirective', function($timeout) {
return {
restrict: 'EA',
require: 'ngModel',
controller: 'myDirectiveController',
controllerAs: 'D_MD',
link: function(scope, element, attrs, ngModel) {
ngModel.$validators.required = function(modelValue) {
var result = false;
if (modelValue && modelValue.length > 0)
result = true;
return result;
};
},
bindToController: {
ngModel: '='
},
template: '(<span>ArrayLength:{{D_MD.ngModel.length}}</span>)<br /><input type=button value="add (inside directive)" ng-click=D_MD.AddElem() /><br /><input value="clear (inside directive)" type=button ng-click=D_MD.Clear() />'
}; }) .controller('myDirectiveController', [function() {
var CTX = this;
//debugger;
//CTX.ngModel = "pipo";
CTX.clearModel = function() {
CTX.ngModel = [];
};
CTX.AddElem = function() {
CTX.ngModel.push({
Name: 'obj100',
Value: 100
});
};
CTX.Clear = function() {
CTX.ngModel = [];
}; }]) .controller('MainCtrl', function($scope) {
var CTX = this;
CTX.patito = 'donde esta el patito';
CTX.arrayElements = [];
CTX.setElements = function() {
CTX.arrayElements = [{
Name: 'obj0',
Value: 0
}, {
Name: 'obj1',
Value: 1
}, {
Name: 'obj2',
Value: 2
}];
};
CTX.clearElements = function() {
CTX.arrayElements = [];
}; })
add (outside directive)
ボタンを押すと、必要なものは正常に機能しますが、ボタンadd (inside directive)
を押すと、フォームで必要なエラーが引き続き発生します(フォームはディレクティブの外部で定義されています)。
しかし、私にとってより紛らわしいのは次のことです。
ボタンを押したclear (inside directive)
後にadd (outside directive)
ボタンを押して必要なエラーを出すと、この場合、フォームが更新され、検証エラーが表示されます。
$validations.required が配列に新しい要素を追加するとディレクティブ内で起動しないのに、クリアすると起動しないのはなぜですか?
何か案は?
********更新********
array.push
array.push を変更して、内部に必要な要素を含む新しい配列を割り当てて問題なく動作する場合に
関連しているようです。なぜそれが起こっているのかという疑問はまだあります。
回避策として、ディレクティブでAddElem
関数を次のように変更しました。
CTX.AddElem = function() {
CTX.ngModel = CTX.ngModel.concat({
Name: 'obj100',
Value: 100
});
};