Question

当用户输入错误的号码时，显示错误消息时出现问题。我尝试为此编写自己的指令但是我收到了错误 “无法读取未定义的属性'值'”。我完全是个新手，只是想学习指令。知道我犯了哪个错误或者我该怎么做？

模板：

   <div ng-controller="performanceController">

<input  type="number" name="performance" class="typo-xl-l input-power"
       ng-model="performance" min-performance="10" max-performance="30">
    <span id = "errorText"></span>

</div>

控制器：

    'use strict';


angular.module('myApp', [
  'ngRoute'
]).
config(['$routeProvider', function($routeProvider) {
      $routeProvider
          .when('/', {
            templateUrl: 'partials/inputView.html'
          })

    }])
.controller('performanceController', function($scope) {

})
.directive("maxPerformance", [function() {
      return {
        restrict: "A",
        link: function(scope, elem, attrs) {
          var limit = parseInt(attrs.maxPerformance);

            if (this.value.length > limit) {
              document.getElementById('errorText').innerText("wrong number");
            }

        }
      }
    }])
    .directive("minPerformance", [function() {
      return {
        restrict: "A",
        link: function(scope, elem, attrs) {
          var limit = parseInt(attrs.minPerformance);

          if (this.value.length < limit) {
            document.getElementById('errorText').innerText("wrong number");
          }

        }
      }
    }]);

更新：

   .directive("maxPerformance", [function() {
      return {
        restrict: "A",
        require: 'ngModel', //this will make ng-model attribute compulsary on directive element.
        link: function(scope, elem, attrs, ngModel) { //injected ngModel here 4th parameter
          var limit = parseInt(attrs.maxPerformance);
          angular.element(elem).on("keydown", function() {
          if (ngModel.$viewValue.length > limit) {
            document.getElementById('errorText').innerText("wrong number");
          }
          });
        }
      }
    }])
    .directive("minPerformance", [function() {
      return {
        restrict: "A",
        require: 'ngModel',
        link: function(scope, elem, attrs, ngModel) {  //injected ngModel here 4th parameter
          var limit = parseInt(attrs.minPerformance);
          angular.element(elem).on("keydown", function() {
          if (ngModel.$viewValue.length < limit) {
            document.getElementById('errorText').innerText("wrong number");
          }
          });
        }
      }
    }]);

仍然没有工作..

Answer 1

在你的指令中获取ngModel的值时，你实际上可以在指令中使用require: ngModel选项，这将在链接函数中给出ngModelController值。然后很容易就可以使用ngModel.$viewValue

获取它的值

.directive("maxPerformance", [function() {
  return {
    restrict: "A",
    require: 'ngModel', //this will make ng-model attribute compulsary on directive element.
    link: function(scope, elem, attrs, ngModel) { //injected ngModel here 4th parameter
      var limit = parseInt(attrs.maxPerformance);

        if (ngModel.$viewValue.length > limit) {
          document.getElementById('errorText').innerText = "wrong number";
        }

    }
  }
}])
.directive("minPerformance", [function() {
  return {
    restrict: "A",
    require: 'ngModel',
    link: function(scope, elem, attrs, ngModel) {  //injected ngModel here 4th parameter
      var limit = parseInt(attrs.minPerformance);

      if (ngModel.$viewValue.length < limit) {
        document.getElementById('errorText').innerText = "wrong number";
      }

    }
  }
}]);

<强>更新

而不是创建自定义指令，你可以使用ng-min＆amp;来处理这么小的事情。 ng-max元素上的input属性为type="number"。

<form name="myForm" ng-controller="performanceController">
    <input type="number" name="performance" class="typo-xl-l input-power" ng-model="performance" min="10" max="30" />
    <span id="errorText" ng-show="myForm.performance.$error.min || myForm.performance.$error.max">
      Wrong Number
    </span>
</form>

Demo Plunkr

用AngularJS编写自己的指令

1 个答案: