У меня есть угловое приложение, которое использует автоматическую загрузку с атрибутом 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 не был доступен во время начальной загрузки.

Как я могу получить Угловой сигнал при загрузке?

источник

2016-07-23 Dominik George

Вы загрузки этого шаблона с помощью JQuery? –

Возможно. Это внутренняя магия в Bootstrap. –

О да! Верный. См. Мой ответ. –

Да, вы правы. Это не работает, потому что его не было во время 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. Лучше не использовать его.

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

заказ http://angular-ui.github.io/bootstrap/#/modal

источник

2016-07-23 16:00:37

Спасибо за ваш сложный ответ! Работает как шарм, но теперь я пошел с Angular-UI. –

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

ответ

Важная

Смежные вопросы