3

我无法弄清楚以下示例中发生了什么。我只是想在我自己的指令中创建自己的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
      });
    };
4

1 回答 1

2

你在ngModel这里使用的是一个 JS 对象。$modelValueAngular 在其and中有对该对象的引用$viewValue（因为 Angular 基本上是$viewValue = $modelValue）。The$modelValue是 的实际值ngModel，如果你改变它，$viewValue运行之后会改变$validators。

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

文档解释它：

由于 ng-model 不做深度观察，$render() 只有在 $modelValue 和 $viewValue 的值实际上不同于它们之前的值时才会被调用。如果 $modelValue 或 $viewValue 是对象（而不是字符串或数字），那么如果您仅更改对象的属性，则不会调用 $render()。

如果我过度简化 Angular 代码，这个片段会解释它：

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/

于 2017-08-07T18:12:43.227 回答