$rootScope.$broadcast不起作用。

10 浏览
0 Comments

$rootScope.$broadcast不起作用。

我正在尝试使用$rootScope.$broadcast刷新我的视图。\n该服务是-\n

var app = angular.module("productsApp", [])
    .service("serviceProvider", function ($http) {
        this.getDatas = function getDatas(data) {
            return $http({
                method: 'POST', url: serviceUrl + '/GetProductsByCategoryOrName', headers: {
                    'Authorization': apiKey
                },
                data: data
            })
        }
        return this
    }).factory("sharedService", function ($rootScope) {
        var mySharedService = {};
        mySharedService.values = [];
        mySharedService.passData = function (newData) {
            mySharedService.values = newData;
            $rootScope.$broadcast('dataPassed', newData);
        }
        return mySharedService;
    });

\n通过控制器调用-\n

function searchProductsController($scope, $window, serviceProvider, sharedService) {
    $scope.submit = function () {
        var data = { "query": $scope.searchText, "categoryId": "976759", "pageIndex": 0, "sortDirection": "asc" };
        serviceProvider.getDatas(data).then(function (response) {
            var result = response;
            sharedService.passData(result.data.data);
        });
    }
};

\n在这个控制器里，sharedService.passData传递了一个新的数组给服务方法。然后它试图通过$rootScope.$broadcast(\'dataPassed\', newData)来广播这些变化。\n我不知道为什么它没有广播到视图中。是否有其他方法可以广播这些变化？\n注意-\n我之前的问题如何在控制器之间传递数据没有得到任何帮助。\n编辑\n到目前为止，我在监听器中进行了更改-\n

mySharedService.passData = function (newData) {
    $rootScope.$broadcast('dataPassed', newData)
}
$rootScope.$on('dataPassed', function (newData) {
    mySharedService.values = newData;
})

\n但是仍然无法刷新视图。

0

3 答案

0 Comments

原因：

问题出现的原因是没有正确监听广播的事件。在代码中，使用了$rootScope.$broadcast方法广播事件，但是没有正确监听该事件。正确的监听方式应该是使用$rootScope.$on方法，传入的第一个参数为要监听的事件名称，第二个参数为回调函数，用于处理接收到的数据。

解决方法：

正确监听广播事件的解决方法如下所示：

$rootScope.$on('dataPassed', function(data){
console.log(data);
});

在回调函数中，可以对接收到的数据进行处理，并进行相应的操作。

参考链接：

该问题也可以通过查看以下链接获得帮助和解答：Why do we use $rootScope.$broadcast in AngularJS?

0
0 Comments

问题的原因是没有正确注册监听器来监听广播事件，并且没有使用$on方法来在作用域上绑定事件。解决方法是在控制器中注册监听器，并在回调函数中重新分配广播数据到作用域变量上，以实现更新绑定的效果。

首先，我们需要在控制器中注册监听器：

$scope.$on('dataPassed', function(event, newData) {
  sharedService.values = newData;
  $scope.products = sharedService.values;
})

然后，我们需要在服务中使用$rootScope.$broadcast方法来广播数据：

$rootScope.$broadcast('dataPassed', newData)

这样，当广播事件被触发时，监听器会被调用，并且将广播数据重新分配给作用域变量，实现更新绑定的效果。

0
0 Comments

在上述代码中，问题是$rootScope.$broadcast不起作用。解决方法是确保在使用$broadcast或$emit时，有一个$scope.$on来监听该事件。

代码中的解决方法是在GetController和searchProductsController中添加$scope.$on监听器来接收广播的事件。

以下是修改后的代码示例：

var app = angular.module("productsApp", [])
    .service("serviceProvider", function ($http) {
        this.getDatas = function getDatas(data) {
            return $http({
                method: 'POST', url: serviceUrl + '/GetProductsByCategoryOrName', headers: {
                    'Authorization': apiKey
                },
                data: data
            });
        }
        return this
    }).factory("sharedService", ['$rootScope', function ($rootScope) {
        var mySharedService = {
            values: [],
            setValues: function(data){
                if(data){
                    mySharedService.values.length = 0;
                    data.forEach(function(item){
                        mySharedService.values.push(item);
                    });    
                }
            }
        };
        return mySharedService;
    }]);      
function GetController($scope, serviceProvider, sharedService, $rootScope) {
    var shareData = sharedService;
    $scope.products = sharedService.values;
    $scope.shareData = sharedService;
    var data = { "query": "grocery", "categoryId": "976759", "pageIndex": 0, "sortDirection": "asc" };
    serviceProvider.getDatas(data).then(function (response) {
        sharedService.setValues(response.data.data);
        $rootScope.$broadcast('dataPassed'); // 广播事件
    });
    // 监听事件
    $scope.$on('dataPassed', function(){
        // 事件处理代码放在这里
    });
}
function searchProductsController($scope, $window, serviceProvider, sharedService, $rootScope) {
    $scope.submit = function () {
        var data = { "query": $scope.searchText, "categoryId": "976759", "pageIndex": 0, "sortDirection": "asc" };
        serviceProvider.getDatas(data).then(function (response) {
            sharedService.setValues(response.data.data);
            $rootScope.$broadcast('dataPassed'); // 广播事件
        });
    }
    // 监听事件
    $scope.$on('dataPassed', function(){
        // 事件处理代码放在这里
    });
};

0