更新數據/在AngularJS

指令之間的狀態，這可能是一個愚蠢的問題，我可以不解釋自己很好，但在這裏不用...我對目前的HTML標籤的一種形式，請注意以下指令：更新數據/在AngularJS

<input type="password" name="password1" id="password1" ng-model="user.plaintextPassword" equals="{{user.password2}}" required ng-trim="false" error-popover> 
<label for="password1">Password 1</label> 

<input type="password" name="password2" id="password2" ng-model="user.password2" equals="{{user.plaintextPassword}}" required ng-trim="false" error-popover > 
<label for="password2">Password 2</label>

現在在這兩個標籤上我都有AngularJS指令。該equals指令手錶密碼的兩個值，應它們匹配/不匹配這臺模型的有效性，就像這樣：

.directive('equals', function() { 
     return { 
      restrict: 'A', 
      require: 'ngModel', 
      link: function(scope, elm, attrs, ngModel) { 
       if(!ngModel) { 
        return; // do nothing if no ng-model 
       } 

       // watch own value and re-validate on change 
       scope.$watch(attrs.ngModel, function() { 
        validate(); 
       }); 

       // observe the other value and re-validate on change 
       attrs.$observe('equals', function() { 
        validate(); 
       }); 

       var validate = function() { 
        // values 
        var val1 = ngModel.$viewValue; 
        var val2 = attrs.equals; 

        // set validity 
        ngModel.$setValidity('equals', val1 === val2); 
        //console.log(ngModel); 
       }; 
      } 
     }

現在我有一個產生驗證彈出另一個指令應形式的項目是無效的，這是在表單項的KeyDown或焦點發射（這裏是經編輯的版本）：

.directive('errorPopover', function() { 
     return { 
      restrict: 'A', 
      require: 'ngModel', 
      link: function(scope, element, attrs, ngModel) { 

       // validate on keydown and focus in input field 
       element.on('keydown focus', function() { 
        scope.$evalAsync(function() { 

         var popoverOptions = { 
          'placement': (attrs.errorPopover) ? attrs.errorPopover : 'left', 
          'trigger': 'manual', 
          'content': setValidationText(attrs, ngModel) 
         }; 

         // raise the error etc... 
        }); 
       }); 


       // hide popover when user leaves input 
       element.on('blur', function() { 
        // do stuff 
       }); 

       var setValidationText = function(attrs, ngModel) { 
        var errorText = ''; 

        // lots going on here... and then 
        if(attrs.equals && ngModel.$error.equals === false) { 
         // add to the error text 
        } 

        return errorText; 
       }; 
      } 
     };

現在，這並不爲ngModel工作是不同的，而equals指令將保持正確的有效性值errorPopover指令沒有。所以這個值可能是錯誤的，但在errorPopover指令中ngModel.$error.equals總是保持爲真。如何使用由equals指令確定的正確值更新errorPopover指令？

請注意：建議或在正確的方向一推之後，我更不是一個代碼示例...因爲我不能確定這是否是關於隔離範圍或廣播，等等，等等...

來源

2013-12-10 Mike Sav

在plunker中的演示將有所幫助。很難幫助解決問題而不能使用控制檯 – charlietfl

在我看來，'errorPopover'應該只能監視模型的有效性，而不能被綁定到元素事件。 – charlietfl

我覺得你讓這太複雜了。指令主要用於DOM操作。在你的等號指令中，你只是在做數據驗證，所以控制器功能會更好。

您可以在兩個輸入中刪除您的'等於'自定義指令並替換它添加ng-change =「validatePassword（）」（您也可以在提交表單時調用此函數，如果包含其他驗證邏輯，如密碼強度測試）。然後在函數中比較檢查是一件簡單的事情，如果兩個變量不匹配，則顯示您的彈出窗口。

你的popover看起來太複雜了。我會盡量把HTML保存在你的HTML文件中，然後控制你的控制器功能的顯示/隱藏（或使用ng-if）。我會將所有在popover中的相關邏輯移動到驗證函數中，或者如果可以在不同類型的驗證中重用，那麼可以在單獨的函數中使用。因此，如果驗證功能是true或false，最終只顯示/隱藏HTML的一部分。這是一種簡單的模式，可以讓您的HTML保持一致。

希望這會給你一個更簡單的方向。

來源

2013-12-10 16:22:33 Darryl

更新數據/在AngularJS

回答

相關問題