使用$ broadcast在控制器之间共享数据

时间:2016-10-13 16:53:13

标签: angularjs angularjs-service angularjs-controller angularjs-events

要在控制器之间共享数据,通常使用服务。

我发现,如果我必须分享的数据是$rootScope.$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()
                    }
                }
            ]


);

0 个答案:

没有答案