是否可以在指令中以編程方式鏈接事件處理程序？

Question

我一直在試圖找出一種方法來觸發輸入元素上的驗證例程，當按鈕被單擊在相同的形式。我一直在尋找幾種不同的方式來做到這一點。似乎沒有什麼複雜的是創建一個修改輸入按鈕以在目標表單元素上觸發$ validate方法的指令。我已經設置好了，但沒有太多麻煩，但是我已經阻止瞭如何修改ngClick事件處理程序，以便觸發$ validate，同時保持原始的HTML定義的ngClick不變。

我試圖使用指令模板函數來提取原始的ngClick方法，並將其鏈接到指令中定義的新ngClick函數。這開始變得很混亂，我很擔心它有多脆弱。

有沒有辦法攔截指令中的ngClick處理程序並仍然保持原始功能不變？

或者，我願意提供有關如何在控制器層最少參與下單擊按鈕時觸發輸入字段上的驗證例程的建議。

Answer 1

這是一個XY-question的經典示例（如果不是雙XY問題）。

你不需要「鏈事件處理程序」（無論你是什麼意思）。我認爲，您也不需要手動觸發驗證，因爲您正在驗證外部數據。

在Angular中進行驗證只是運行 - 而不是通過更改數據來觸發。

要添加您自己的自定義驗證器，您需要創建一個指令（它看起來像你一樣）。在該指令中，您可能需要指定要驗證的內容，例如要檢查重複項的字符串數組。

假設，爲了簡單起見，您要驗證ViewModel中的另一個值。假設，它會變成這樣如何使用：

<input ng-model="bar"> 
<form name="form1"> 
    <input ng-model="foo" not-equal-to="bar"> 
</form> 
<span ng-show="form1.$error.notEqualTo">error: foo is equal to bar</span> 

所以，你需要創建一個指令notEqualTo，增加了一個驗證的ngModel.$validators管道。該指令還需要$watch更改到bar和重新設置有效期：

app.directive("notEqualTo", function(){ 
    return { 
    require: "ngModel", 
    scope: { 
     notEqualTo: "=" 
    }, 
    link: function(scope, element, attrs, ngModel){ 

     // register "notEqualTo" validator 
     ngModel.$validators.notEqualTo = function(modelValue){ 
     return validate(modelValue, scope.notEqualTo); 
     }; 

     // rerun validation on changes to scope.notEqualTo 
     scope.$watch("notEqualTo", function(){ 
     ngModel.$setValidity("notEqualTo", 
           validate(ngModel.$modelValue, scope.notEqualTo)); 
     }); 

     function validate(one, other){ 
     return one !== other; 
     } 
    } 
    }; 
}); 

plunker