我有一個使用自動引導與ng-app屬性的Angular應用程序。我再後來，在引導模式對話框從一個HTML模板添加一個DOM樹，像這樣：現在如何在引導後激活新的角度控制器

<!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>

，在模板中，我有一個ng-controller屬性的div來註冊控制器綁定到它，如下所示：

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

控制器定期在應用程序中註冊。

但是，加載模態後控制器沒有綁定，因爲我猜想，因爲ng-controller div在引導過程中不可用。

如何在加載時使Angular獲得它？

來源

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

重要

您用來加載模板的遠程選項已被棄用，並且在引導程序4中被刪除。最好不要使用它。

此外，Angular的UI團隊已經爲Bootstrap的Javascript功能編寫了本地Angular代碼，因此您在使用Angular時不需要jQuery和bootstrap.js文件。

結帳http://angular-ui.github.io/bootstrap/#/modal

來源

2016-07-23 16:00:37

感謝您的精心解答！像魅力一樣工作，但現在我使用了Angular-UI。 –

如何在引導後激活新的角度控制器

回答

重要

相關問題