javascript - 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 指令的 View 时，控制台向我显示此错误:

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 中的下划线，您可以设置:

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 = _;
 });
});