2

いくつかのマークアップとロードされたコントローラーがあります。

次に、以前に定義したコントローラーの 1 つを使用している ajax によって、いくつかのモーダル ウィンドウのコンテンツを読み込みます。しかし、モーダルが読み込まれるまでは必要ないため、このコントローラーは使用されていないようです。

質問: モーダルがロードされたときにコントローラーを機能させる方法は? $scope.$digest() を試したところ、「ダイジェストが進行中です」というエラーが発生しました。

index.html

<html data-ng-app="foo">
<head>
<script src="/js/app.js"></script>
</head>
<body>
<div id="modal"></div>
</body>
</html>

js/app.js

!(function(){
    function FormCtrl($scope) {
        console.log($scope); // never fired

        $scope.Submit = function() {
            console.log('submit'); // never fired too :C
        }
    }

    angular.module('foo', []).controller('FormCtrl', FormCtrl);
})();

ajax によって読み込まれ、#modal に挿入された html コンテンツ

<div data-ng-controller="FormCtrl">
<form name="signup" data-ng-submit="Submit()">
<!-- form data -->
</form>
</div>

解決：

$.modal().open({
    onOpen: function($e) {
        $http.get('/views/' + url).success(function(data) {
            $compile(data)($scope, function(clonedElem) {
                $e.html(clonedElem);
            });

            // $e.html(data); was used instead of statement above
        });
    }
});
4

1 に答える 1

1

新しい DOM 要素を既存の Anuglar アプリに挿入する場合。あなたのオプションは使用することです

  • ng-include : これには、src部分的なコンテンツをロードする必要がある URL を取得するプロパティがあります。AngularJS はそれを内部的にコンパイルします。ng-includeここで重要なことの 1 つは、angular がHTMLに遭遇するとすぐにテンプレートをダウンロードすることです。
  • より複雑なプロセスである$compileサービスを使用して、手動で DOM をダウンロードしてコンパイルします。

AJAX コンテンツに で定義されたコントローラが含まれている場合ng-controller、AngularJS がそれを作成します。

ただし、いずれにせよ、コントローラー スクリプトは初期化\セットアップ フェーズで既に接続されている必要があることに注意してください。

于 2013-09-06T11:12:56.980 に答える