JSFiddle не распознает Angular

Этот 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);
        }               

  }]);

В консоли 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. есть подробное сообщение об ошибке

2pha 24.07.2018 16:20

@ 2pha Я думал, что <script src = "//cdnjs.cloudflare.com/ajax/libs/validate.js/0.12.0/val‌​idate.min.js"></scri‌​pt> предоставит модуль, но, видимо, это не работает. Вместо этого я попытался добавить validate.min.js в качестве ресурса, но безрезультатно. Есть идеи?

knot22 24.07.2018 16:29
Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
0
2
24
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

После добавления <script type = "text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/angular-ui-validate/1.2.3/validate.min.js"></script> в HTML сработало.

Другие вопросы по теме