angularjs - $broadcast を使用してコントローラー間でデータを共有する

Question

コントローラー間でデータを共有するには、サービスを使用するのが一般的です。

共有する必要があるデータがまたは の$rootScope.$broadcast場合、 を使用すると非常に便利であることがわかりました。[]{}

私にとって、ブロードキャストを使用する利点は、データがサービスにロードされているかどうかを確認するためにウォッチャーを使用する必要がないことです。書くコードも少なくなります。

だから私の質問は：

• $broadcast を使ってもいいですか
• $broadcast を使用すると不便なことはありますか

私が言いたいことを示すために、両方の「テクニック」を使用したいくつかの例を次に示します。

使用例 $rootScope.$broadcast

// controller is registering 'list-loaded'
angular.module('myApp').controller(
    'ControllerOne'
            ['$rootScope','$scope',
                function ($rootScope, $scope) {

                    // the data
                    $scope.data = {
                        list : ["foo","bar"]
                    }
                    // sending the event with the data
                    $rootScope.$broadcast('list-loaded', { list: $scope.data.list });
                }
            ]
);

//controller is listening for 'list-loaded'
angular.module('myApp').controller(
    'ControllerTwo',
            ['$rootScope','$scope',
                function ($rootScope, $scope) {

                    // empty data
                    $scope.data = {}

                    // when the event is received we set the data
                    $scope.$on('list-loaded', function(event, args) {
                        $scope.data.list = args.list;
                    });
                }
            ]
);

サービス利用例

// the service
angular.module('myApp').factory(
    'Service',
        [ 

            function() {
                // the data to be shared
                var list = []

                return {
                    setList : function(pList){
                        list = pList;
                    },
                    getList : function(){
                        return list;
                    }

                };
            }
        ]
);

//controller is setting list into Service
angular.module('myApp').controller(

    'ControllerOne',
            ['$scope', 'Service',

                function ($scope, Service) {

                    // setting the data to service
                    Service.setList(["foo","bar"])
                }
            ]
);

//controller is getting list from Service
angular.module('myApp').controller(
    'ControllerTwo',
            ['$scope','Service',

                function ($scope, Service) {

                    // getting the data from service
                    $scope.data = {
                        list : Service.getList()
                    }
                }
            ]


);