require.js Использование директивы AngularJS из другого модуля - PullRequest
Новая
       10

require.js Использование директивы AngularJS из другого модуля

0 голосов
/ 01 сентября 2018

Директива в модуле не загружается при вызове другим модулем

У меня есть веб-приложение AngularJS с модулем под названием 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']);
});

Как вы можете видеть выше, это зависит от другого модуля ng, называемого dataListPane ниже: 

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

Все это связано с requirejs, и все вызывается в правильном порядке. В модуле 'heroEditor' у меня есть директива, также называемая 'heroEditor': 

// 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'};
    });
});

В разметке для редактора героев я пытаюсь добавить экземпляр директивы панели списка данных (она должна быть доступна!) Примерно так: 

<data-list-pane></data-list-pane>

В браузере функция директивы для панели списка данных никогда не срабатывает, несмотря на то, что я включаю ее в свою разметку. Впрыск с точки зрения requirejs работает нормально. Ng также не выдает исключение, когда я создаю модуль редактора героев и задаю ему зависимость модуля dataListPane (что означает, что он знает, что модуль существует!)

Я использую нг 1.7.2

Любая помощь будет принята с благодарностью.

1 Ответ

0 голосов
/ 01 сентября 2018

Вы не показали ни одного фрагмента, который показывает, как вы собираете модули 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(...)
        };
    });

Я сделал рабочую демонстрацию этого подхода здесь.

Два замечания о подходе выше:

  1. Разделенное определение директивы (т. Е. dataListPane в вашем случае) не может явно зависеть от модуля AngularJS, для которого он должен быть объявлен, иначе это циклическая зависимость
  2. Обратите внимание, что модуль AngularJS явно зависит от модуля RequireJS, в котором находится определение директивы, и инициализирует его
...