Javascript require.js使用来自不同模块的AngularJS指令

当由其他模块调用时，模块中的指令未引导

我有一个AngularJS web应用程序，其中有一个名为“heroEditor”的模块：

// 3) heroEditor ng module is created and injects the dataListPane
// module as a dependency (see step 1)
define('heroEditor/module',['common/module', 'dataListPane/module'], function(){
    return angular.module('heroEditor', ['common', 'dataListPane']);
});

// 4) Register the heroEditor directive on the heroEditor module
// this directive will try to consume a dataListPane directive instance
// which should be available as it was registered (see step 2)
define('heroEditor/directive/heroEditor',['heroEditor/module', 'heroEditor/service/heroData'], function(heroEditorMod){
    heroEditorMod.directive('heroEditor', ['heroData', function(heroData){
        //hero editor directive definition
    });
});

如上所示，它取决于另一个名为“dataListPane”的ng模块：

// 1) define the dataListPane ng module
define('dataListPane/module',[], function(){
    return angular.module('dataListPane', []);
});

这一切都是通过requirejs连接起来的，一切都是按正确的顺序调用的。在模块“heroEditor”中，我有一个指令，也称为“heroEditor”：

// 3) heroEditor ng module is created and injects the dataListPane
// module as a dependency (see step 1)
define('heroEditor/module',['common/module', 'dataListPane/module'], function(){
    return angular.module('heroEditor', ['common', 'dataListPane']);
});

// 4) Register the heroEditor directive on the heroEditor module
// this directive will try to consume a dataListPane directive instance
// which should be available as it was registered (see step 2)
define('heroEditor/directive/heroEditor',['heroEditor/module', 'heroEditor/service/heroData'], function(heroEditorMod){
    heroEditorMod.directive('heroEditor', ['heroData', function(heroData){
        //hero editor directive definition
    });
});

在依赖项中，“dataListPane”模块是我想在“heroEditor”指令的标记中使用的一个指令。下面是“dataListPane”指令：

// 2) Register the dataListPane directive on the dataListPane module
define('dataListPane/directive/dataListPane',['dataListPane/module'], function(dataListPaneMod){
    dataListPaneMod.directive('dataListPane', function(){
        // [NEVER CALLED] data list pane directive content
        return {scope:{},templateUrl:'a/valid/path/to/dataListPane.html'};
    });
});

在hero编辑器的标记中，我尝试插入数据列表窗格指令的一个实例（它应该是可用的！），如下所示

在浏览器中，尽管我将数据列表窗格的指令函数包含在标记中，但该窗格始终不会启动。从requirejs的角度来看，注入工作正常。当我创建hero编辑器模块并赋予它dataListPane模块依赖关系时，Ng也不会抛出异常（这意味着它知道该模块存在！）

我使用的是ng 1.7.2

---

任何帮助都将不胜感激。

您还没有显示任何片段，表明您如何在更高级别上整合RequireJS模块（例如一些基本

app.js

文件）。但是，我怀疑您的

dataListPane/directive/dataListPane

模块从来都不是任何RequireJS依赖项定义的一部分（即无法从

app.js

访问），这就是为什么其中的代码从未执行

确保拉入AngularJS样式模块上的声明的一种方法是让AngularJS模块本身确保执行此类声明的代码

// dataListPane/module.js
define(
    'dataListPane/module',
    ['dataListPane/directive/dataListPane'],
    function (dataListPane) {
        var mod = angular.module('dataListPane', []);
        return function () {
            dataListPane.init(mod);
            return mod;
        };
    });

// dataListPane/directive/dataListPane.js
define(
    'dataListPane/directive/dataListPane',
    // You cannot depend on 'dataListPane/module' here! (i.e. cyclic dependency)
    ['exports'],
    function (exports) {
        exports.init = function (mod) {
            // mod.directive(...)
        };
    });

关于上述方法，有两点：

分离的指令定义（即，在您的情况下，

dataListPane

）不能显式地依赖于需要声明的AngularJS模块，否则它是一个循环依赖项

请注意，AngularJS模块显式地依赖于指令定义所在的RequireJS模块，并对其进行初始化

---

没有看到任何循环依赖项。当您需要“main.js”时，main需要指令，该指令随后需要ng模块，首先需要ng模块，这样您就可以将该指令挂起。实际上，我在依赖关系树的更高层次上进行了这项工作。我有一个理论，在angular中有一个bug，它只会在这些特定的环境中重现。真糟糕。没有这个工作，我将复制和粘贴大量重复的代码。哦，好吧。我更新了我原来的帖子，用步骤显示了序列。它们发生的时间与顺序不符，但我知道这些define（）回调确实是按顺序1,2,3,4调用的。这在angular中是一个罕见但一致的bug，没有其他解释。如果您在“main.js”中演示如何设置您的RequireJS依赖项，那么我们可以建立运行时依赖关系图，这会有所帮助。请检查我的最小的例子，如果你还没有。这不是AngularJS错误。

define

调用的顺序无关紧要。这是RequireJS在运行时对模块定义的不完全遍历（基于所遇到的每个模块指定的依赖项），这导致您看到了所看到的内容。