Requirejs dependency not working

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行，其中評論）有一個​​erroe「Ladda沒有定義」。
如果我將添加以下行：

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被包裹在定義（）{}

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

在requireJS文檔它指出：

只能使用其他的「墊片」模塊作爲依賴於墊高的腳本，或者說有沒有依賴性，並調用定義（）後，他們也創造了一個全球性的（如jQuery或AMD庫lodash）。否則，如果您使用AMD模塊作爲shim配置模塊的依賴項，則在構建之後，只有在構建中的shimmed代碼執行後才能評估AMD模塊，並且會發生錯誤。最終的解決方案是升級所有shimmed代碼以具有可選的AMD define（）調用。

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

所以，Ladda是AMD模塊已經定義DEPS。在您的main.js把它墊片之外：

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

把你ngLadda的定義（功能（需要）{}）像它在原來的答案是說，但不要把任何依賴內。