Question

我正在尝试在我的应用中使用angular-ladda指令。这是我的main.js，它是requirejs宣言文件：

requirejs.config({

    paths: {
        underscore: 'lib/underscore/underscore',
        angular: 'lib/angular/angular',
        jquery: 'lib/jquery/dist/jquery.min',
        'angular-route': 'lib/angular-route/angular-route',
        'controllers': 'js/controllers',
        'services': 'js/services',
        'providers': 'js/providers',
        'filters': 'js/filters',
        'directives': 'js/directives',
        'app': 'js/app',
        'spin': 'lib/ladda/dist/spin.min',
        'ladda': 'lib/ladda/js/ladda', 
        'ngLadda': 'lib/angular-ladda/src/angular-ladda'

    },

    shim: {
        underscore: {
            exports: '_'
        },
        'angular': {
            exports: 'angular'
        },
        'states': {
            deps: ['angular'],
            exports: 'states'
        },
        'angular-route': {
            deps: ['angular']
        },
        'ladda': {
            deps: ['spin'],
            exports: 'Ladda'
        },
        'ngLadda': {
            deps: ['ladda']
        }
    },
    priority: [
        'angular'
    ]
});

requirejs(['angular',
            'app',
            'underscore',
            'js/routes',
            'jquery',
            'services/services',
            'providers/providers',
            'directives/directives',
            'filters/filters',
            'controllers/controllers',
            'ngLadda'

           ], function (angular, app, _) {
               angular.element(document).ready(function () {
                   angular.bootstrap(document, ['App']);
                   document.getElementsByTagName('html')[0].dataset.ngApp = 'App';
               });

           });

这是ladda指令：

/**!
 * AngularJS Ladda directive
 * @author Chungsub Kim <subicura@subicura.com>
 */

/* global Ladda */
(function () {
  'use strict';

  angular.module('angular-ladda', []).directive(
    'ladda',
    [
      '$compile',
      function ($compile) {
        return {
          restrict: 'A',
          link: function (scope, element, attrs) {
            element.addClass('ladda-button');
            if(angular.isUndefined(element.attr('data-style'))) {
              element.attr('data-style', 'zoom-in');
            }


            var ladda = Ladda.create( element[0] ); //here is were Ladda is not defined
            $compile(angular.element(element.children()[0]).contents())(scope);

            scope.$watch(attrs.ladda, function(loading) {
              if(loading || angular.isNumber(loading)) {
                if(!ladda.isLoading()) {
                  ladda.start();
                }
                if(angular.isNumber(loading)) {
                  ladda.setProgress(loading);
                }
              } else {
                ladda.stop();
              }
            });
          }
        };
      }
    ]
  );
})();

在指令代码（第22行，注释中）有一个错误＆＃34; Ladda未定义＆＃34;。
如果我要添加以下行：

var Ladda = require('ladda');

这一切都会奏效，那么为什么main.js中的依赖关系还没有这样做呢？

你能帮我解决这个问题吗？

Answer 1

我认为要使依赖工作，您必须将ngLadda声明定义为模块

define(function (require) {
    // your ngLadda declaration here
}

编辑：还有另一种可能性当你看看Ladda的代码时： https://github.com/hakimel/Ladda/blob/master/js/ladda.js

你看到Ladda被包装在define（）{}

中

    // AMD module
    else if( typeof define === 'function' && define.amd ) {
        define( [ 'spin' ], factory );
    }

在requireJS文档中，它声明：

仅使用其他＆＃34; shim＆＃34;模块作为shimmed脚本的依赖项，或者没有依赖项的AMD库，在它们创建全局（如jQuery或lodash）之后调用define（）。否则，如果您使用AMD模块作为shim配置模块的依赖项，则在构建之后，可能不会在构建中的填充代码执行之后评估该AMD模块，并且将发生错误。最终的解决方法是将所有已调整的代码升级为可选的AMD define（）调用。

http://requirejs.org/docs/api.html#config-shim

因此，Ladda是一个已经定义了deps的AMD模块。在你的main.js中把它放在垫片之外：

'ladda': {
     exports: 'Ladda'
 },
'ngLadda': {
     deps: ['ladda']
 }
 shim: {
    //your other shimmed modules
 }

将你的ngLadda放在define（function（require）{}）中，就像它在原始答案中说的那样，但不要把任何依赖放在里面。

要求依赖不起作用

1 个答案: