Question

我有一个简单的应用程序，我想添加一个微调器。我已经按照github上的文档页面上的说明进行操作，出于某种原因，我经常得到：

由于以下原因导致无法实例化模块angularSpinner：错误：[$ injector：nomod]模块'angularSpinner'不可用！您要么错误拼写了模块名称，要么忘记加载它。如果注册模块，请确保将依赖项指定为第二个参数。

我的应用定义：

angular.module('MyApp', ['angularSpinner']);

我的HTML主管：

<script src="js/spin.js" type="text/javascript"></script>
<script src="js/angularspinner.js" type="text/javascript"></script>


<script src="js/MyApp" type="text/javascript"></script>

在这个阶段我非常困惑。该应用程序位于IFRAME中，但我可以在控制台中看到两个微调器脚本都已加载。任何提示？

Answer 1

angular spinner code should be 
/**
 * angular-spinner version 0.5.0
 * License: MIT.
 * Copyright (C) 2013, 2014, Uri Shaked and contributors.
 */

(function (root) {
    'use strict';

    function factory(angular, Spinner) {

        angular
            .module('angularSpinner', [])

            .factory('usSpinnerService', ['$rootScope', function ($rootScope) {
                var config = {};

                config.spin = function (key) {
                    $rootScope.$broadcast('us-spinner:spin', key);
                };

                config.stop = function (key) {
                    $rootScope.$broadcast('us-spinner:stop', key);
                };

                return config;
            }])

            .directive('usSpinner', ['$window', function ($window) {
                return {
                    scope: true,
                    link: function (scope, element, attr) {
                        var SpinnerConstructor = Spinner || $window.Spinner;

                        scope.spinner = null;

                        scope.key = angular.isDefined(attr.spinnerKey) ? attr.spinnerKey : false;

                        scope.startActive = angular.isDefined(attr.spinnerStartActive) ?
                            attr.spinnerStartActive : scope.key ?
                            false : true;

                        scope.spin = function () {
                            if (scope.spinner) {
                                scope.spinner.spin(element[0]);
                            }
                        };

                        scope.stop = function () {
                            if (scope.spinner) {
                                scope.spinner.stop();
                            }
                        };

                        scope.$watch(attr.usSpinner, function (options) {
                            scope.stop();
                            scope.spinner = new SpinnerConstructor(options);
                            if (!scope.key || scope.startActive) {
                                scope.spinner.spin(element[0]);
                            }
                        }, true);

                        scope.$on('us-spinner:spin', function (event, key) {
                            if (key === scope.key) {
                                scope.spin();
                            }
                        });

                        scope.$on('us-spinner:stop', function (event, key) {
                            if (key === scope.key) {
                                scope.stop();
                            }
                        });

                        scope.$on('$destroy', function () {
                            scope.stop();
                            scope.spinner = null;
                        });
                    }
                };
            }]);
    }

    if (typeof define === 'function' && define.amd) {
        /* AMD module */
        define(['angular', 'spin'], factory);
    } else {
        /* Browser global */
        factory(root.angular);
    }
}(window));

并请通过以下格式

休闲代码行（您也应该参考角度脚本）

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script>
  <script type="text/javascript" src="http://fgnass.github.io/spin.js/spin.min.js"></script>
  <script type="text/javascript" src="angular-spinner.js"></script>
  <script src="script.js"></script>
</head>

<body ng-app="myapp" ng-controller="MyController">
  <h1>Hello Spinner!</h1>
  <input type="button" ng-click="startSpin()" value="Start spinner" />
  <input type="button" ng-click="stopSpin()" value="Stop spinner" />
  <br />Spinner active: {{spinneractive}}<br />Started: {{startcounter}} times<br />
  <span us-spinner="{radius:30, width:8, length: 16}" spinner-key="spinner-1"></span>
</body>

</html>

并按照正确的plnkr：http://plnkr.co/edit/BGLUYcylbIVJRz6ztbhf?p=preview

角度模块'angularSpinner'不可用

1 个答案: