Angular 自定义验证指令。从视图模型中获取错误

Question

我有以下 (https://jsfiddle.net/f30bj43t/5/) HTML：

<div ng-controller="DataController as vm">
  <div ng-repeat="name in vm.users track by $index">{{name}}</div>
  <form name="form" validation="vm.errors">
    <input validator ng-model="vm.name" name="vm.name" placeholder="name" type="text" />
    <a href="#" ng-click="vm.add(vm.name)">Add</a>
  </form>
</div>

此表单将名称添加到列表中，控制器是：

app.controller("DataController", DataController);

function DataController() {
  var vm = this;
  vm.name = "Mary";
  vm.users = ["Alice", "Peter"];
  vm.errors = [];
  vm.add = function(name) {  
    if (name == "Mary") {
      var error = { property: "name", message: "name cannot be Mary"};
      if (vm.errors.length == 0) 
        vm.errors.push(error);        
      } else {
        vm.users.push(name);      
        vm.errors = [];
      }      
    }
}

在我添加的表单上 validation="vm.errors" 定义了哪个变量包含要在每个 validator 指令中使用的错误...

然后在每个 validator 指令中，我将使用该变量来选择正确的错误并显示它...

app.directive("validation", validation);

function validation() {

  var validation = {
    controller: ["$scope", controller],
    replace: false,
    restrict: "A",
    scope: {
      validation: "="
    }
  };

  return validation;

  function controller($scope) { 
    this.getErrors = function () {
      return $scope.validation;
    }    
  } 

}  

app.directive("validator", validator);

function validator() {

  var validator = {
    link: link,
    replace: false,
    require: "^validation",
    restrict: "A"
  };

  return validator;

  function link(scope, element, attributes, controller) {    
    var errors = controller.getErrors();
    console.log(errors);    
    // do something with errors
  } 

}

问题

在验证器的链接函数指令中，我需要跟踪validation="vm.errors"传递的变量的变化，这样我就可以在每个验证器中检查是否发生错误并采取措施。

但是console.log(errors) 好像没有效果...

我该如何解决这个问题？

Answer 1

您可以使用 $watch 或 $broadcast 和 $on。
我更喜欢使用$on，因为观看一个变量比听一个事件消耗更多，我会说，对于您的情况，最好使用 $broadcast 和 $on，因为您不是在观看范围变量，而是来自控制器的变量。

如果你想了解更多关于 $on 和 $watch 的信息，这里有一个建议：Angular JS $watch vs $on

这是您的 JSFiddle 修改后的内容。

Answer 2

这里有一个工作的 jsfiddle：https://jsfiddle.net/f30bj43t/8/

每次更改时，我都会将vm.errors 变量记录到控制台中：

function link(scope, element, attributes, controller) {   
    scope.$watch('vm.errors.length', function () {
        if(scope.vm.errors){
            console.log(scope.vm.errors);
        }   
  });
} 

由于范围继承，这是可能的。在您的情况下，vm 是添加到控制器范围内的变量，并且此范围内的所有指令默认都将继承它（有办法避免这种情况）。

无论如何，您似乎创建了太多指令。在你的情况下，对我来说，将所有东西都放在控制器中就足够了。

干杯

哈维尔