Question

我无法弄清楚以下示例中发生了什么。我只是想在我自己的指令中创建自己的required验证，我有一个数组，我想让它成为必需的（它简化了我想做的事情，但足以说明这一点）< / p>

Fiddler：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
      });
    };

Answer 1

这里使用的ngModel是一个JS对象。 Angular在$modelValue和$viewValue中引用了该对象（因为angular基本上是$viewValue = $modelValue）。 $modelValue是ngModel的实际值，如果您更改它，则会在运行$viewValue后更改$validators。

要知道您的ngModel是否已更改，请将ngModel.$viewValue与ngModel.$modelValue进行对比。在这里，您正在push() $viewValue同时更新$modelValue，因为它们只是彼此的引用。因此，在比较它们时，它们具有相同的价值！这就是角度不能运行$validator的原因。

The docs explain it :

由于ng-model没有深度监视，只有$ modelValue和$ viewValue的值实际上与之前的值不同时才会调用$ render（）。如果$ modelValue或$ viewValue是对象（而不是字符串或数字），那么如果只更改对象的属性，则不会调用$ render（）。

如果我过度简化角度代码，这段代码解释了它：

var myArray = [];

var ngModel = {
  $viewValue: myArray,
  $modelValue: myArray,
  $validate: function () { console.log('validators updated'); }, // log when validators are updated
}

function $apply() { // the function that is called on the scope
  if (ngModel.$viewValue !== ngModel.$modelValue) {
    ngModel.$viewValue = ngModel.$modelValue;
    ngModel.$validate(); // this will trigger your validator
  } else {
    console.log('value not changed'); // the new value is no different than before, do not call $validate
  }
}

// your push is like doing :
ngModel.$viewValue.push(12); 
$apply(); // will output 'value not changed', because we changed the view value as well as the model value

// whereas your should do:
var newArray = [];
// create a copy of the array (you can use angular.copy)
for (var i = 0; i < myArray.length; i++) {
  newArray.push(myArray[i]);
}
ngModel.$viewValue.push(12);
ngModel.$viewValue = newArray; // here we clearly update the $viewValue without changing the model value
$apply(); // will output 'validators updated'

当然，您不必强制进行数组复制。相反，您可以强制更新ngModel。这是通过调用ngModel.$validate();

来完成的

这样做的一种方法是在forceUpdate()中添加scope功能，并在执行push();

之后从控制器中调用它

示例：http://jsfiddle.net/L7Lxkq1f/

除非清除模型，否则在指令内更新模型时，Angularjs表单$ error不会更新

1 个答案: