ng-app属性で自動ブートストラップを使用する角度アプリケーションがあります。私はその後、後に、そのように、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はブートストラップ中に利用できなかったため、コントローラはモーダルを読み込んだ後にバインドされません。

どのように角度をつけてロードするといいですか？

出典

2016-07-23 Dominik George

jQueryを使用してそのテンプレートをロードしていますか？おそらく、 –

。これはブートストラップの内部魔法です。 –

ああああ！正しい。私の答えを見てください。 –

はい、あなたは正しいです。それはBootstrapの時点では存在せず、AngularがテンプレートをコンパイルしていないjQueryを使用して新しいテンプレートをロードしているため、動作しません。ここでの実施例を参照してください

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

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

：重要https://plnkr.co/edit/zASHzGwOLxku12Ae5hnP?p=preview

を

物事を動作させるために、あなたはそうのような新しく追加されたHTMLを（あなたのコントローラの1でこれを行うと`$compile`を注入）コンパイルする必要があります

テンプレートを読み込むために使用しているリモートオプションは廃止され、ブートストラップ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を使いました。 –

ブートストラップ後に新しい角型コントローラをアクティブにする方法

答えて

を 物事を動作させるために、あなたはそうのような新しく追加されたHTMLを（あなたのコントローラの1でこれを行うと$compileを注入）コンパイルする必要があります

関連する問題

を

物事を動作させるために、あなたはそうのような新しく追加されたHTMLを（あなたのコントローラの1でこれを行うと`$compile`を注入）コンパイルする必要があります