Этот JSfiddle, похоже, не распознает Angular, хотя эта библиотека была выбрана на панели JS. http://jsfiddle.net/knot22/rxqh8jtc/12/
Почему не работает?
Код размещен ниже, как того требует SO; однако, вероятно, наиболее полезно перейти к скрипке, чтобы увидеть все настройки.
Вот HTML:
<html ng-app = "myApp">
<script src = "//cdnjs.cloudflare.com/ajax/libs/validate.js/0.12.0/validate.min.js"></script>
<div ng-controller = "formulaCtrlr as vm" >
<form name = "vm.formContainer.form" autocomplete = "off">
<div class = "form-group" ng-class = "{'has-error': vm.formContainer.form.FatA.$dirty && vm.formContainer.form.FatA.$invalid}">
<label for = "FatA" class = "col-sm-2 control-label">Fat A</label>
<input name = "FatA" type = "text" class = "form-control col-sm-10 input-sm" ng-required = "true" ng-model-options = "{updateOn: 'blur'}" ui-validate = "{numberCheck: 'vm.numberCheck($value)', fatRangeCheck: 'vm.fatRangeCheck($value)'}" ng-model = "vm.formulaInput.Fats[0]" /><span>%</span>
<span class = "error" ng-show = "vm.formContainer.form.FatA.$dirty && vm.formContainer.form.FatA.$invalid">Invalid entry.</span>
<span class = "error" ng-show = "vm.formContainer.form.FatA.$dirty && vm.formContainer.form.FatA.$error.numberCheck">{{vm.errorMessages.numberCheck}}</span>
<span class = "error" ng-show = "vm.formContainer.form.FatA.$dirty && vm.formContainer.form.FatA.$error.fatRangeCheck">{{vm.errorMessages.fatRangeCheck}}</span>
</div>
<div class = "form-group" ng-class = "{'has-error': vm.formContainer.form.FatB.$dirty && vm.formContainer.form.FatB.$invalid}">
<label for = "FatB" class = "col-sm-2 control-label">Fat B</label>
<input name = "FatB" type = "text" class = "form-control col-sm-10 input-sm" ng-required = "true" ng-model-options = "{updateOn: 'blur'}" ui-validate = "{numberCheck: 'vm.numberCheck($value)', fatRangeCheck: 'vm.fatRangeCheck($value)'}" ng-model = "vm.formulaInput.Fats[1]" /><span>%</span>
<span class = "error" ng-show = "vm.formContainer.form.FatB.$dirty && vm.formContainer.form.FatB.$invalid">Invalid entry.</span>
<span class = "error" ng-show = "vm.formContainer.form.FatB.$dirty && vm.formContainer.form.FatB.$error.numberCheck">{{vm.errorMessages.numberCheck}}</span>
<span class = "error" ng-show = "vm.formContainer.form.FatB.$dirty && vm.formContainer.form.FatB.$error.fatRangeCheck">{{vm.errorMessages.fatRangeCheck}}</span>
</div>
<div class = "col-sm-offset-2">
<input type = "reset" value = "Clear" class = "btn btn-default" ng-click = "vm.clear()" ng-disabled = "vm.formContainer.form.$pristine" />
</div>
</form>
<div>formula input: {{vm.formulaInput}}</div>
</div>
</html>
Вот JS:
angular.module('myApp', ['ui.validate'])
.controller("formulaCtrlr", ['$scope', function ($scope) {
var vm = this;
vm.formContainer = {
form: {}
}
var originalFormContainer = angular.copy(vm.formContainer); //used for clear function below (to clear form)
vm.formulaInput = {};
vm.formulaInput.Fats = [];
vm.clear = function () {
//vm.formulaInput.Fats = [];
//vm.formContainer.form.$setPristine();
vm.formContainer = angular.copy(originalFormContainer);
}
vm.errorMessages = {
numberCheck: 'Value must be a number.',
fatRangeCheck: 'Number must be between 0 and 100.'
}
vm.numberCheck = function (value) {
var result = !(isNaN(parseFloat(value)));
return result;
//return !(isNaN(parseFloat(value)));
}
vm.fatRangeCheck = function (value) {
var result = (value && value > 0.0 && value < 100.0);
return result;
//return (value && value > 0.0 && value < 100.0);
}
}]);
@ 2pha Я думал, что <script src = "//cdnjs.cloudflare.com/ajax/libs/validate.js/0.12.0/validate.min.js"></script>
предоставит модуль, но, видимо, это не работает. Вместо этого я попытался добавить validate.min.js в качестве ресурса, но безрезультатно. Есть идеи?
После добавления
<script type = "text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/angular-ui-validate/1.2.3/validate.min.js"></script>
в HTML сработало.
В консоли
Module 'ui.validate' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
есть подробное сообщение об ошибке