$watch 不适用于指令值答案

【问题标题】：$watch is not working with directive value$watch 不适用于指令值
【发布时间】：2017-04-23 00:28:45
【问题描述】：

所以我正在创建将匹配密码的指令。我试图找出我自己的方法来做到这一点。最后，虽然我找到了解决方案，但它没有用。这是驱动代码：

directive('matchPass', function () {
  return {
    //restrict: 'A',
    require: 'ngModel',
    link: function (scope, element, attrs, ngModelCtrl) {
      scope.$watch(attrs.ngModel, function (n) {
        ngModelCtrl.$setValidity('matchPass', n == scope.registerForm.password.$viewValue)
      })
      scope.$watch(attrs.matchPass, function (n) {
        ngModelCtrl.$setValidity('matchPass', n == scope.registerForm.password.$viewValue)
      })
    }
  }
})

问题来了

scope.$watch(attrs.matchPass...

它不会触发，第一个工作正常。我被困住了，迷路了。

查看代码

<div class="marginAuto">
        <md-input-container>
            <label>Password</label>
            <input required="" name="password" ng-model="password" type="password" ng-minlength="8" ng-maxlength="30">
            <div ng-messages="registerForm.password.$error">
              <div ng-message="required">This is required!</div>
              <div ng-message-exp="['required', 'minlength', 'maxlength']">
                  8 - 30 characters!
              </div>
            </div>
        </md-input-container>
    </div>
    <div class="marginAuto">
        <md-input-container>
            <label>Repeat password</label>
            <input required name="repassword" ng-model="repassword" type="password" match-pass="password">
            <div ng-messages="registerForm.repassword.$error" na>
              <div ng-message="required">This is required!</div>
            </div>
        </md-input-container>
    </div>
    <div class='msg-block' ng-show='registerForm.$error'>
      <span class='msg-error' ng-show='registerForm.repassword.$error.matchPass'>
        Passwords don't match.
      </span>
    </div>

【问题讨论】：

它不起作用，因为 ng-model 值保持未定义，直到 ng-minlength 没有被超过.. 结帐 Why does setting ng-model to undefined 了解更多详情

标签： javascript angularjs angularjs-directive frontend watch

【解决方案1】：

您可以尝试摆脱 $watch 并改用 ng-change，类似下面的内容应该适合您。

因此，将指令更改为具有函数而不是手表。

directive('matchPass', function () {
  return {
    //restrict: 'A',
    require: 'ngModel',
    link: function (scope, element, attrs, ngModelCtrl) {

      ngModelCtrl.$setValidity('matchPass', false);

      scope.checkMatch = function(password, repassword) {
        if (password === repassword) {
            ngModelCtrl.$setValidity('matchPass', true);
        } else {
            ngModelCtrl.$setValidity('matchPass', false);
        }
      })
    }
  }
})

现在下面唯一的调整是替换指令属性

<div class="marginAuto">
        <md-input-container>
            <label>Password</label>
            <input required="" name="password" ng-model="password" type="password" ng-minlength="8" ng-maxlength="30">
            <div ng-messages="registerForm.password.$error">
              <div ng-message="required">This is required!</div>
              <div ng-message-exp="['required', 'minlength', 'maxlength']">
                  8 - 30 characters!
              </div>
            </div>
        </md-input-container>
    </div>
    <div class="marginAuto">
        <md-input-container>
            <label>Repeat password</label>
            <input required name="repassword" ng-model="repassword" type="password" ng-change="checkMatch(password, repassword)">
            <div ng-messages="registerForm.repassword.$error" na>
              <div ng-message="required">This is required!</div>
            </div>
        </md-input-container>
    </div>
    <div class='msg-block' ng-show='registerForm.$error'>
      <span class='msg-error' ng-show='registerForm.repassword.$error.matchPass'>
        Passwords don't match.
      </span>
    </div>

【讨论】：

【解决方案2】：

我想出了自己的解决方案。

link: function (scope, element, attrs, ngModelCtrl) {  
      if (!scope.registerForm[attrs.matchPass].$invalid) {
        scope.$watchGroup([attrs.ngModel, attrs.matchPass], function (n) {
          console.log(n)
          ngModelCtrl.$setValidity('matchPass', n[0] === n[1])
        })
      }

效果很好。

【讨论】：