Как активировать новый контроллер Angular после начальной загрузки

У меня есть приложение Angular, которое использует автоматическую загрузку с атрибутом ng-app. Затем я позже добавляю поддерево DOM в модальное диалоговое окно Bootstrap из шаблона HTML, например:

<!DOCTYPE html>
<html ng-app="Foo">
 <head>
  <link href="lib/bootstrap/css/bootstrap.min.css"  rel="stylesheet" media="screen" />
 </head>

 <body>
  <a href="template.html" data-toggle="modal" data-target="#modal">Modal</a>

  <div class="modal fade" id="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
      </div>
    </div>
  </div>

  <script src="lib/jquery/jquery.js"></script>
  <script src="lib/bootstrap/js/bootstrap.js"></script>
  <script src="lib/angular.js/angular.js"></script>
 </body>
</html>

Теперь в шаблоне у меня есть div с атрибутом ng-controller для привязки к нему зарегистрированного контроллера, например:

<div ng-controller="ViewModalController">
</div>

Контроллер регулярно регистрируется в приложении.

Однако контроллер не привязан после загрузки модального окна, как я предполагаю, потому что div ng-controller был недоступен во время начальной загрузки.

Как я могу заставить Angular забрать его при загрузке?


javascript jquery angularjs twitter-bootstrap angular-controller
person Dominik George    schedule 23.07.2016    source источник
comment
Вы загружаете этот шаблон с помощью jQuery?   -  person Shashank Agrawal    schedule 23.07.2016
comment
Вероятно. Это внутренняя магия Bootstrap.   -  person Dominik George    schedule 23.07.2016
comment
О, да! Правильный. Смотрите мой ответ.   -  person Shashank Agrawal    schedule 23.07.2016

Ответы (1)


arrow_upward
2
arrow_downward

Да, ты прав. Это не работает, потому что его не было во времена Bootstrap, и вы загружаете новый шаблон с помощью jQuery, для которого Angular не компилирует шаблон.

Чтобы все заработало, вы должны скомпилировать недавно добавленный HTML следующим образом (сделайте это в одном из ваших контроллеров и введите $compile):

$("#modal").on("shown.bs.modal", function() {
    var $modal = angular.element(document.getElementById('modal'));

    $compile($modal.contents())($scope);
});

См. рабочий пример здесь: https://plnkr.co/edit/zASHzGwOLxku12Ae5hnP?p=preview

Важный

Опция удаленного доступа, которую вы используете для загрузки шаблона, устарела и удалена в Bootstrap 4. Лучше не использовать ее.

Кроме того, команда пользовательского интерфейса Angular написала собственный код Angular для функций Javascript Bootstrap, поэтому вам не нужны jQuery и файл bootstrap.js при использовании с Angular.

Оформить заказ http://angular-ui.github.io/bootstrap/#/modal

person Shashank Agrawal    schedule 23.07.2016
comment
Спасибо за ваш развернутый ответ! Работает как шарм, но теперь я выбрал Angular-UI. - person Dominik George; 24.07.2016