指令中的AngularAMD加載模塊（如下划線）

Question

我正在嘗試使用自定義指令在我的項目中使用angularAMD模塊。 在這些指令中，我必須使用下划線之類的外部模塊，但是我不能僅在指令中加載這些模塊。

main.js

require.config({
baseUrl: "app",
paths: {
    'angular': 'vendor/angular.min',
    'angular-ui-router': 'vendor/angular-ui-router.min',
    'angularAMD': 'vendor/angularAMD.min',
    'ngload': 'vendor/ngload.min',
    'underscore': 'vendor/angular-underscore-module',
    'ui-bootstrap': 'vendor/ui-bootstrap.min',
    "jqueryCli": "../assets/js/jquery.min",
    "bootstrapCli": "../assets/js/bootstrap",
    "bootstrapSideCli": "../assets/js/bootstrap-sidebar",
    "underscoreCli": "../assets/js/underscore",
    "mpGrid": "shared/mpGrid/mpGrid",
    "i18nService": "vendor/angular-locale_it-it"
},
shim: {
    'angularAMD': ['angular'],
    'angular-ui-router': ['angular'],
    'underscore': ['angular', 'underscoreCli'],
    'bootstrapCli': ['jqueryCli'],
    'bootstrapSideCli': ['bootstrapCli'],
    'i18nService': ['angular'],
    'mpGrid': ['angular', 'i18nService']
},
deps: ['app']
});

app.js

define(['angularAMD', 'angular-ui-router',
'jqueryCli', 'bootstrapCli', 'bootstrapSideCli', 'underscoreCli',
'shared/sideMenu/sideMenu',
'mpGrid'
], function (angularAMD) {
var app = angular.module("webapp", ['ui.router']);
app.config(function ($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise("/home");
    $stateProvider
        .state('home',angularAMD.route({
            url: '/home',
            templateUrl: 'home/homeView',
            controller: 'homeCtrl',
            controllerUrl: 'home/homeController'}))
        .state('menu',angularAMD.route({
            url: '/menu',
            templateUrl: 'menu/menuView',
            controller: 'menuCtrl',
            controllerUrl: 'menu/menuController'}));

});
app.constant('appConfig', {
    menu: [
        {value: 'Home', link: '#/home', icon: 'glyphicon-home'},
        {value: 'Menu', link: '#/menu', icon: 'glyphicon-th'}
    ],
    title: 'My Web App'
});
angularAMD.bootstrap(app);
return app;
});

mpGrid.js（我的自定義指令）

define(['angularAMD'], function (angularAMD) {
 angularAMD.directive('mpGrid', ['underscore', function (_) {
     var test = _;
 }]);
});

當我嘗試使用mp-grid指令加載視圖時，控制台向我顯示此錯誤：

Error: [$injector:unpr] http://errors.angularjs.org/1.4.0/$injector/unpr?
p0=underscoreProvider%20%3C-%20underscore%20%3C-%20mpGridDirective

（與i18nService>，<相同）

有人可以幫我嗎？

我要瘋了 ：（

Answer 1

您需要閱讀所設置的依賴項，首先要閱讀shim上的文檔。

例如，為main.js的underscore設置：

shim: {
    ...
    'underscore': ['angular', 'underscoreCli'],
    ...
},

您正在告訴RequireJS ，在加載underscore之前，需要加載angular和underscoreCli 。

然后，在app.js ，加載underscoreCli ，它沒有設置依賴項：

define([..., 'underscoreCli', ... ], function (...) {

另外，請仔細檢查underscore是否為有angular JS包。 如果不是，則需要像這樣加載：

define(['angularAMD', 'underscore'], function (angularAMD, _) {
 angularAMD.directive('mpGrid', function () {
     var test = _;
 });
});