1

私が書いている小さなアプリに複数のコントローラーがあり、そのようにコントローラー間で「選択された」変数を正常に共有しました。

app.service('selectedEmployee', function () {
    var selected = null;

    return 
    { 
        getSelected: function() {
            return selected;
        },
        postSelected: function(employee) {
            selected = employee;
        }
    };

});

従業員のリストを含むサイド ナビゲーション バーがあります。従業員をクリックすると、postSelected 関数を呼び出してから、getSelected を呼び出して $scope.selected を設定します。

$scope.selectEmployee = function(employee) {

   //Calling Service function postSelected
    selectedEmployee.postSelected(employee);

    $scope.selected = selectedEmployee.getSelected();

    if ($mdSidenav('left').isOpen()) {
        $mdSidenav('left').close();
    }

}

メイン コンテンツ エリア用に 3 つ目のコントローラーがありますが、ここで何をすべきかわかりません。選択した従業員からの情報を表示したいのですが、Angular は最初の従業員が選択済みとして設定される前にページ全体をコンパイルしており、その後の従業員の選択はメイン コンテンツ ページをリロードしていません (私が持っているため) t は彼らに言ったと思います)。これが私のメインコンテンツコントローラーです：

app.controller('mainContentController', ['$scope','selectedEmployee',
    function ($scope, selectedEmployee) {
        $scope.selected = selectedEmployee.getSelected();
        console.log($scope.selected);
    }
]);

現在、メイン コンテンツ ビューは非常にシンプルです

<h2>{{selected.firstName}}{{selected.lastName}}</h2>

私の質問は、従業員を選択したときに情報が表示されるように、部分ビューを効果的に更新するように 1 つのコントローラーに指示する方法です。

GitLab リポジトリ

4

3 に答える 3

1

単にコントローラのテンプレートのデータを表示および変更することが目的である場合は、乱雑なブロードキャストに依存しないでください。

コントローラーは、テンプレートで使用するためにサービスまたはファクトリーがいつ更新されたかを「知る」必要はありません。これは、ドット表記を介してデータにアクセスするため、Angular がこれを処理するためです。これは、もっと読むべき重要な概念です。

この Fiddle は、データにアクセスする両方の方法を示しています。また、テンプレートでコンテナー オブジェクトを使用すると、コントローラーに格納されているプリミティブ文字列値の代わりに、Angular が変更時に同じ実際のオブジェクトを再チェックする方法を示しています。

http://jsfiddle.net/a01f39Lw/2/

テンプレート：

<div ng-controller="Ctrl1 as c1">
    <input ng-model="c1.Bands.favorite" placeholder="Favorite band?">
</div>
<div ng-controller="Ctrl2 as c2">
    <input ng-model="c2.Bands.favorite" placeholder="Favorite band?">
</div>

JS:

var app = angular.module("app", []);      

app.factory('Bands', function($http) {
    return {
        favorite: ''
    };    
});

app.controller('Ctrl1', function Ctrl1(Bands){
    this.Bands = Bands;
});
app.controller('Ctrl2', function Ctrl2(Bands){
    this.Bands = Bands;
});
于 2016-05-08T23:15:09.153 に答える
0

したがって、多くの調査とDsafdsからの非常に大きな助けのおかげで、 $rootScope.$broadcast を使用して、変数への変更の部分的なビューを通知することができました。

rootScope からブロードキャストすると、すべての子コントローラーに到達するため、サービス変数に $watch を設定する必要はありません。

$scope.selectEmployee = function(employee) {
            selectedEmployee.postSelected(employee);
            $scope.selected = selectedEmployee.getSelected();
            $rootScope.$broadcast('selected:updated', $scope.selected);
            if ($mdSidenav('left').isOpen()) {
                $mdSidenav('left').close();
            }
        }

そして、メインコンテンツエリアのコントローラーで

function ($scope) {
    $scope.$on('selected:updated', function(event, data) {
        $scope.selected = data;
    })
}

データを直接渡す必要はないと思います。selectedEmployee.getSelected() を簡単に呼び出すこともできます。

$rootScope は、親コントローラーとブロードキャスト コントローラーにも含める必要があります。

于 2016-05-07T03:02:06.713 に答える
0

まず第一に、良い慣行から始めて、ここで問題を解決しましょう...

良い習慣

少なくとも私の知る限り、私はあなたのようにサービスを使用するつもりはありません...ご覧のとおり、サービスはオブジェクトのようなものです。したがって、サービスを通常の使用方法に変換すると、次のようになります。

app.service('selectedEmployee', [selectedEmployeeService])

    function selectedEmployeeService(){
      this.selected = null;
      this.getSelected = function(){
        return this.selected;
      }
      this.postSelected = function(emp){
        this.selected = emp;
      }
    }

ご覧のとおり、関数を個別に配置し、サービスを実際のオブジェクトにしました..コントローラー関数の引数を次のようにフォーマットすることをお勧めします.. 本当の問題への良い実践については十分です。

問題を解決する

OK、アンドリューは実際にこれを理解しました!! 問題は、$rootScope を使用してメッセージをブロードキャストする必要があることです。

$rootScope.$broadcast('selected:updated', $scope.selected);

そして、 $scope.selected がいつ更新されるかを確認する必要があります.. $scope.$watch のようなものです...

$scope.$on('selected:updated', function(event, data) {
          $scope.selected = data;
})

その後、自動的に更新されて動作します! これが役に立ったことを願っています！

PS: 彼がすでに答えていることを知りませんでした...

于 2016-05-07T03:26:10.647 に答える