Как использовать два приложения с одинаковым именем?

Question

Мне нужно создать две области на моей странице с приложением AngularJS с таким же именем. Причина в том, что я использую тему Wordpress, которая не позволяет добавлять теги body. И я не могу создать div высокого уровня с угловыми атрибутами, потому что тема автоматически добавит закрывающий div.

Обе угловые области делают одно и то же.

Вот что я хочу:

<!-- lots of theme code here -->
 <div ng-app="app" ng-controller="ctrl">some angular variables and HTML</div>

<!-- lots of theme code here -->
 <div ng-app="app" ng-controller="ctrl">some angular variables and HTML</div>

Когда я делаю вышеизложенное, первый угловой прицел выполняется нормально, а второй, похоже, игнорируется. Я представляю, потому что два ng-приложения с одинаковыми именами на одной странице недопустимы.

В моем файле JS у меня есть только "app" и "ctrl". Есть ли другой способ сделать это?

Я мог бы создать два угловых приложения в файле js, но затем мне пришлось бы дублировать весь мой код... верно?

Не проще ли было бы просто добавить две вышеупомянутые директивы в тег body, используя javascript?

Answer 1

Вы должны использовать angular.bootsrap чтобы инициализировать ваше приложение на вашей странице, добавьте свой код внутри angular.element готовое событие, которое будет инициализировать ваше угловое приложение, когда DOM будет готов.

angular.element(document).ready(function() {
  //document inside angular.bootstrap could be replaced by any element selector,
  //wherever you want to inject your angular app
  angular.bootstrap(document, ['myApp']);
});

Я считаю, что использование вышеупомянутого подхода было бы лучше, спасибо.

Answer 2

Простое решение: просто добавьте ng-app и ng-controller в тег body динамически с помощью javascript. Сценарий должен находиться внизу страницы, чтобы DOM мог полностью загрузиться первым.