44

ng-controller="GeneralInfoCtrl"DOM で複数の要素を平手打ちした場合、それらは同じものを共有する$scope(または、少なくとも双方向バインディングが機能しない) と考えました。

私がこれをしたい理由は、HTML の非常に異なる部分にモーダル ダイアログが関連付けられたさまざまな読み取り専用ビューがあり、それらが共通の祖先 ( と を除く) を共有していないため<body>です<html>。

両方のコントローラーが同じオブジェクトを参照するようにする/データバインディングをそれらの間で機能させる方法はありますか?

Jadeで書かれた、マークアップを表示することを主張する人のためのコードを次に示します。

   .client-box(ng-controller="GeneralInfoCtrl")
        .box-header
            .box-title
                h5 General Information
            .box-buttons
                button.btn.btn-small(data-target='#editGeneralInfo', data-toggle='modal', data-backdrop='static') <i class="icon-pencil"></i> Edit
        .box-body
            table.table.table-tight.table-key-value
                tr
                    th Name
                    td {{client.fullName()}}
                tr
                    th Also Known As
                    td {{client.aka}}
                tr
                    th Birth Date
                    td {{client.birthDate|date:'mediumDate'}}
    ...

#editGeneralInfo.modal.hide.fade(ng-controller="GeneralInfoCtrl")
    .modal-header
        button.close(type='button', data-dismiss='modal') &times;
        h3 Edit General Information
    .modal-body
        form.form-horizontal.form-condensed
            .control-group
                label.control-label First Name
                .controls
                    input(type='text', placeholder='First Name', ng-model='client.firstName')
            .control-group
                label.control-label Last Name
                .controls
                    input(type='text', placeholder='Last Name', ng-model='client.lastName')
            .control-group
                label.control-label Also Known As
                .controls
                    input(type='text', placeholder='AKA', ng-model='client.aka')
            .control-group
                label.control-label Birth Date
                .controls
                    input(type='text', placeholder='MM/DD/YYYY', ng-model='client.birthDate')
...

そして私のコントローラー：

function GeneralInfoCtrl($scope) {
    $scope.client = {
        firstName: 'Charlie',
        lastName: 'Brown',
        birthDate: new Date(2009, 12, 15),
        ...
    }
}
4

2 に答える 2

76

Angular コンパイラが HTML で ng-controller を見つけるたびに、新しいスコープが作成されます。(ng-view を使用すると、別のルートに移動するたびに、新しいスコープも作成されます。)

コントローラー間でデータを共有する必要がある場合は、通常、サービスが最適なオプションです。共有データをサービスに入れ、サービスをコントローラーに挿入します。

function GeneralInfoCtrl($scope, MyService) {

これで、各スコープ/コントローラー インスタンスが共有データにアクセスできるようになります。

サービスはシングルトンであるため、共有データのインスタンスは 1 つしか存在しないことに注意してください。

これは、2 つのコントローラーがどのようにデータを共有できるかを示す (私が書いたものではありません)フィドルです。

AngularJS: コントローラー間で変数を渡すにはどうすればよいですか?も参照してください。および
Angularjs: 双方向のデータ バインディングとコントローラーのリロード。

于 2013-01-22T15:41:35.760 に答える
13

共有データをルート スコープに配置するだけで、どこでも使用できるようになります。Angular$rootScopeでは、すべてのスコープのルートであり、コントローラーで使用して、すべてのモジュールで表示する必要があるデータを管理できます。それを使用するには、コントローラー関数に挿入するだけです。詳細な説明については、Angular 開発者ガイドおよびAPI docを参照してください。

于 2013-01-22T07:16:50.493 に答える