Requirejs依赖性不工作 [英] Requirejs dependency not working

问题描述

我试图使用角ladda 指令在我的应用程序。这里是我的main.js这是requirejs宣言文件：

I am trying to use angular-ladda directive in my app. Here is my main.js which is the requirejs manifesto file:

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指令：

Here is the ladda directive:

/**!
 * AngularJS Ladda directive
 * @author Chungsub Kim <[e-mail]>
 */

/* 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();
              }
            });
          }
        };
      }
    ]
  );
})();

在指令code（22行，其中注释）有Ladda没有定义的erroe。结果
如果我将添加以下行：

In the directive code (line 22, where commented) there is an erroe "Ladda is not defined".
If I will add the following line:

var Ladda = require('ladda');

这一切都将正常工作，所以为什么在main.js的依赖性​​不这样做了吗？

It all will work, so why the dependency in the main.js not doing this already?

您可以请帮我这个吗？

推荐答案

我觉得对于依赖工作，你必须定义ngLadda声明作为一个模块

I think for the dependency to work, you'd have to define ngLadda declaration as a module

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

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

您看到Ladda被包裹在定义（）{}

You see that Ladda is being wrapped in define(){}

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

在requireJS文档它指出：

In requireJS docs it's stated that:

只能使用其他的垫片模块，依赖关系匀脚本，或有不依赖AMD库和调用定义（）后，他们也创造了一个全球性的（像jQuery或lodash）。否则，如果您使用的是AMD模块作为一个垫片配置模块的依赖关系，构建后，即AMD模块可直到在构建被匀code后评估执行，并会发生错误。最终的解决办法是升级所有匀code有可选的AMD定义（）调用。

Only use other "shim" modules as dependencies for shimmed scripts, or AMD libraries that have no dependencies and call define() after they also create a global (like jQuery or lodash). Otherwise, if you use an AMD module as a dependency for a shim config module, after a build, that AMD module may not be evaluated until after the shimmed code in the build executes, and an error will occur. The ultimate fix is to upgrade all the shimmed code to have optional AMD define() calls.

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

所以，Ladda是AMD模块DEPS已定义。在你main.js把它垫片之外：

So, Ladda is an AMD module with deps already defined. In your main.js put it outside of shim:

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

把你ngLadda的定义（功能（需要）{}）像它在原来的答复的说，但不要把任何依赖内。

Put your ngLadda in define(function(require){}) like it's said in original answer, but don't put any dependencies inside.

这篇关于Requirejs依赖性不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！