2

私はそのようなマークアップを持っています：

<ul>
    <li data-ng-controller="TileController">
        <h1>Title</h1>
        <span>
            <a href="#" data-ng-click="loadBeanForEdit()">
        </span>
        ....
        <div id="beanEditModal" data-ng-controller="TileBeanController">
            <!-- Bootstrap modal -->
        </div>
    </li>
    <li>
        ...
    </li>
    ...
</ul>

ワークフローは次のとおりです。ユーザーがクリックaし、ポップアップで編集するためにajaxを使用してデータをロードしたい：

function TileController($scope) {
    $scope.loadBeanForEdit= function(e) {
        e.stopPropagation();
        $("#beanEditModal").modal();
    };
}

問題は、データを親スコープに保持したくないということです（TileController）データをスコープにロードしたいTileBeanController。しかし、どうすれば親コントローラーからそれを行うことができますか？または、おそらくより良いアプローチがありますか？

4

2 に答える 2

4

一般に、2つのコントローラーが通信できるようにサービスを作成する必要があります。私がすることは、loadBeanForEdit関数をそのように拡張することです

function TileController($scope, News) {
    $scope.loadBeanForEdit= function(e) {
        e.stopPropagation();
        News.setModal(some-id-or-whatever);
        $("#beanEditModal").modal();
    };
}

したがって、この関数は、モーダルが開かれたことを聞いているすべての人に通知するサービスを呼び出します。サービスは次のようになります。

angular.factory('News', function($rootScope) {
    var news = {};

    // Sets and broadcasts that a modal has been opened
    news.setModal = function( id ) {
        this.modal = id;
        $rootScope.$broadcast('modal');
    };
});

あなたが今する必要があるのは、次のようにTileBeanController内で何かがブロードキャストされたときに聞くことです。

function TileBeanController($scope, News) {
    $scope.$on('modal', function() {
        // Load data
    });
}

私はそれが役立つことを願っています:)

于 2013-03-11T10:36:04.113 に答える
3

要素のスコープが必要な場合は、スコープを分離したディレクティブでラップします。

myApp.directive('tilebean', function () {
    return {
        restrict : 'E',
        scope: {
            data: '='
        },
        template: '<div id="beanEditModal"><!-- Bootstrap modal -->This is your title: {{data.title}}</div>'
    };
});

次に、このデータパラメータをビューでバインドできます。

<ul>
    <li data-ng-controller="TileController">
        <h1>Title</h1>
        <span>
            <a href="#" data-ng-click="loadBeanForEdit()">
        </span>
        ....
        <tilebean ng-model="data"></tilebean>
    </li>
    <li>
        ...
    </li>
    ...
</ul>

そして、コントローラーにデータを入力します。

function TileController($scope) {
    $scope.loadBeanForEdit= function(e) {
        e.stopPropagation();
        $("#beanEditModal").modal();
        $scope.data = getDataFromAjax();//replace this for your ajax call
    };
}
于 2013-03-11T10:38:12.073 に答える