對另一個值做出反應的驗證指令在1.0.x中有效，但在1.2.x中無效

Question

在angular js中，我想創建一個驗證器，當指定另一個值時，它將導致ng-model值變得無效。 現在，我有一些對angular js 1.1.4可以正常工作的東西（之所以使用它是因為我使用的是舊的plunkr），但是當我切換到1.1.5時，它就停止了工作。

我確定我在示波器上做錯了，但是我不確定是什么。

這是我的代碼（此處為plunkr： http ://plnkr.co/edit/Ug9oM1LNqPpTsONhRTnG?p=preview）

var app = angular.module('angularjs-starter', []);

app.controller('MainCtrl', function($scope) {
  $scope.doSomething = function () { 
    alert('Submitted!');
  }
  $scope.data = {};
  $scope.data.value = new String('blah');
  $scope.data.value.$$error = 'My Error';
  $scope.data.toggleError = function() {
    if ($scope.data.value.$$error) {
      $scope.data.value.$$error = null;    
    }
    else {
      $scope.data.value.$$error = "SOME ERROR";
    }
  };
  console.log($scope.data.value instanceof String);
});

app.directive('serverError', function (){ 
   return {
      require: 'ngModel',
      scope:true,
      link: function(scope, elem, attr, ngModel) {
         scope.$watch('attr.errorValue', function() { 
            console.log("The error value is " + scope.errorValue);
            ngModel.$setValidity('serverError', scope.errorValue == null);           
         });

      }
   };
});

這是我的HTML：-

<!DOCTYPE html>
<html ng-app="angularjs-starter">

  <head lang="en">
    <meta charset="utf-8">
    <title>Custom Plunker</title>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.1.3/angular.min.js"></script>
    <link rel="stylesheet" href="style.css">
    <script>
      document.write('<base href="' + document.location + '" />');
    </script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <form name="myForm" ng-submit="doSomething()">
       <input type="text" name="fruitName" ng-model="data.value" serverError errorValue="data.value.$$error" />
       <div>{{ data.value.$$error }}</div>
       <span class="invalid" ng-if="myForm.fruitName.$error.serverError">
         {{data.value.$$error}}
       </span>
       <br/>
       <button type="submit" ng-disabled="myForm.$invalid">Submit</button>
       <input type="button" ng-click="data.toggleError()" value="Toggle Error"/>
    </form>
  </body>

</html>

從1.1.3更改為1.2.0后，我的指令立即停止工作。

Answer 1

我解決了。

http://plnkr.co/edit/Ug9oM1LNqPpTsONhRTnG?p=preview

該指令非常簡單：

app.directive('serverError', function($parse) {
    return {
        // restrict to an attribute type.
        restrict: 'A',

        // element must have ng-model attribute.
        require: 'ngModel',

        // scope = the parent scope
        // elem = the element the directive is on
        // attr = a dictionary of attributes on the element
        // ctrl = the controller for ngModel.
        link: function(scope, elem, attr, ctrl) {
            scope.$watch(attr.serverError, function(newValue, oldValue) {
               if (newValue != null) {
                  ctrl.$setValidity('serverError', false); 
               }
               else {
                 ctrl.$setValidity('serverError', true); 
               }

            });
        }
    };
});

對另一個值做出反應的驗證指令在1.0.x中有效，但在1.2.x中無效

問題描述

1 個解決方案

解決方案1
0 2014-08-26 01:35:40

對另一個值做出反應的驗證指令在1.0.x中有效，但在1.2.x中無效

問題描述

1 個解決方案

解決方案1 0 2014-08-26 01:35:40

解決方案1
0 2014-08-26 01:35:40