自定義驗證指令不起作用

我寫了一個簡單的指令來驗證數字。但是，如果我在輸入字段中輸入字符，我從不會看到錯誤消息。自定義驗證指令不起作用

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

自定義驗證指令不起作用

回答

相關問題