更新数据/在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

回答

相关问题