自定义验证指令不起作用

我写了一个简单的指令来验证数字。但是，如果我在输入字段中输入字符，我从不会看到错误消息。自定义验证指令不起作用

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

<html ng-app="MyCalc"> 
    <head> 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>  
    <script src="app.js"></script> 
    </head> 
    <body ng-controller="MyController"> 
    <h4>My Simple Calculator</h4> 
    <form name="calcform"> 
     <span ng-show="calcform.item1.$error.numbersonly">item1 must be a number</span> 
     <span ng-show="calcform.item2.$error.numbersonly">item2 must be a number</span> 
     <input name="item1" type="number" ng-model="model.item1" numbersonly />    
     <input name="item2" type="number" ng-model="model.item2" numbersonly /> 
     <input ng-click="add()" type="button" value="+" ng-disabled="calcForm.$invalid"/> 
     <input ng-click="subtract()" type="button" value="-" ng-disabled="calcForm.$invalid"/> 
     <input ng-click="multiply()" type="button" value="*" ng-disabled="calcForm.$invalid"/> 
     <input ng-click="divide()" type="button" value="/" ng-disabled="calcForm.$invalid"/>    
     <p><font size="14">{{model.result}}</font></p> 
    </form> 
    </body> 
</html> 

var app = angular.module('MyCalc', []); 
app.controller('MyController', function ($scope) { 
    var mymodel = { item1: 0, item2: 0, result: 0 }; 
    $scope.model = mymodel; 
    $scope.add = function() { mymodel.result = Number(mymodel.item1) + Number(mymodel.item2); }; 
    $scope.subtract = function() { mymodel.result = Number(mymodel.item1) - Number(mymodel.item2); }; 
    $scope.multiply = function() { mymodel.result = Number(mymodel.item1) * Number(mymodel.item2); }; 
    $scope.divide = function() { mymodel.result = Number(mymodel.item1)/Number(mymodel.item2); }; 
}); 

app.directive('numbersonly', function() { 
    return { 
     require: 'ngModel', 
     link: function (scope, elem, attr, ctrl) { 
      ctrl.$parsers.unshift(function (value) { 
       var isNan = isNaN(value); 
       ngModel.$setValidity('numbersonly', !isNan); 
       return (!isNan) ? value : undefined; 
      }); 

      ctrl.$formatters.unshift(function (value) { 
       var isNan = isNaN(value); 
       ngModel.$setValidity('numbersonly', !isNan); 
       return value; 
      }); 
    } 
    }; 
});

来源

2014-09-05 Knows Not Much

看起来像内置的数字验证你的指令冲突。我删除 “式=号” 和错误消息（S）表示

  <input name="item1" ng-model="model.item1" numbersonly />    
      <input name="item2" ng-model="model.item2" numbersonly />

或与 “文” 取代它

<input name="item1" type="text" ng-model="model.item1" numbersonly />    
<input name="item2" type="text" ng-model="model.item2" numbersonly />

工程太

来源

2014-09-05 17:50:44 alpinescrambler

可以修改plunker？我删除了类型=号码，但它仍然不起作用。 – 2014-09-05 17:53:17

看看这个（从你的帖子复制）http://plnkr.co/edit/IXI5iqKeDxjwKCDcEHoD?p=preview – alpinescrambler 2014-09-05 17:56:38

你可以修改我的版本（而不是创建一个副本）。这将帮助我确切地看到做了哪些更改。 – 2014-09-05 18:03:01

自定义验证指令不起作用

回答

相关问题