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"形式它定義了哪個變量保存了要在每個驗證器指令中使用的錯誤...

Th連接在每個驗證指令，我將使用該變量來選擇正確的錯誤，並顯示它...

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 
    } 

} 

問題

在驗證指令鏈接功能，我需要跟蹤變更通過驗證=「vm.errors」傳遞的變量，所以我可以在每個驗證程序檢查是否發生錯誤並採取行動。

但執行console.log（錯誤）似乎沒有任何效果...

我怎樣才能解決這個問題？

Answer 1

您可以使用$watch或$broadcast和$on。
我主張使用$on，因爲觀看一個變量比聽一個事件消耗的更多，我會說你的情況最好使用$ broadcast和$ on，因爲你沒有看範圍變量，但是來自控制器的變量。

如果您想了解更多關於$上$手錶，這裏有一個建議：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是一個添加到控制器作用域的變量，默認情況下，此作用域內的所有指令都會繼承它（有辦法避免這種情況）。

無論如何，它似乎是你創造了太多的指令。在你的情況下，對我來說，掌握控制器中的所有東西就足夠了。

乾杯

哈維爾