AngularJS: Можно ли вручную добавлять модули boolstrap в несколько элементов без побочных эффектов?

0

У нас есть веб-сайт, который вручную загружает угловой модуль на уровень документа. В этом модуле на каждой странице есть несколько контроллеров. Это не одностраничное приложение, и у него есть традиционное меню, а разные страницы загружают разные контроллеры.

Эта настройка хорошо зарекомендовала себя за последние пару лет, но теперь мы добавляем новый контроллер для грантового поиска и использует html5Mode = true. Это привело к захвату всех ссылок на сайте.

Одним из решений было создание директивы для динамического применения цели к каждой ссылке на сайте. Угловое не захватывает связи с целями. Нам это не понравилось, потому что сайт использует разные цели в разных местах.

Реализованное нами решение включало группировку контроллеров под модули. Поскольку Angular не разрешает вложенные модули, мы загружаем каждый модуль с помощью классов (т.е. любая данная страница может иметь несколько модулей, содержащих несколько контроллеров).

Вот что выглядит:

angular.element(document).ready(function () {
    angular.bootstrap($('.moduleA'), ['moduleA']);
    angular.bootstrap($('.moduleB'), ['moduleB']);
});

Главный вопрос:

Идея начальной загрузки удивительно работает, но я не осведомлен о внутренней работе, чтобы понять, является ли самонастройка таким образом отрицательной. Некоторые страницы имеют тот же модуль, что и 4 или 5 раз в разные div. Это работает, но все в порядке?

например, создает ли это тонну накладных или других побочных эффектов?

Теги:

1 ответ

0
Лучший ответ

Да, будет куча побочных эффектов на вещи, которые распределяются между приложениями, и поэтому их нужно синхронизировать, например, расположение окна и прокрутку. Это, скорее всего, проблема XY, и несколько приложений на странице выглядят как ужасное решение здесь (как и почти в любом другом случае).

target атрибут и абсолютные ссылки являются наиболее популярными и надежными решениями, позволяющими предотвратить привязку $location от ссылок. Отчетливо видно здесь, почему это так.

Проблема легко решена с помощью этой директивы, которая следует за rel="external" соглашением (особенно с поддержкой jQuery) при сохранении существующих target атрибутов.

// <a external href="...
// <a rel="external" href="...
// <a data-rel="external" href="...
app.directive('a', function () {
    return {
        restrict: 'E',
        link: function (scope, element, attrs) {
            var relExternal = attrs.rel && attrs.rel.split(/\s+/).indexOf('external') >= 0;
            if (!('target' in attrs) && (relExternal || 'external' in attrs)) {
                attrs.$set('target', '_self');
            }
        }
    };
});

То же самое можно сделать в обратном направлении, то есть включить target везде, кроме внутренних ссылок.

  • 0
    Это хорошо работает.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню