在执行服务之后延迟控制器初始化

delay controller initialization after service is executed

本文关键字：控制器 初始化 延迟 之后 执行 服务      更新时间：2023-09-26

我在同一视图中有两个控制器
-父控制器：ServiceController（在application.js->&routeProvider中定义）
-子控制器：LanguageController（在视图中定义->ng控制器）

我想将ServiceController中的rest异步方法（$resource.query（））检索到的值传递给LanguageController

如何使视图等待查询完成？

非常感谢

ServiceController

ServiceController.controller('ServiceController', ['$scope' , '$routeParams', 'datas', 'GetService',
    function ServiceController($scope, $routeParams, datas , GetService) {

    $scope.serviceId = $routeParams.serviceId;
    $scope.serviceName = $routeParams.serviceName ;

    var paramsService = {
        serviceId : $scope.serviceId,
        serviceName : $scope.serviceName 
    };

    GetService.query(paramsService , function(serviceDetails) {
        $scope.serviceDetails = serviceDetails ;
        datas.setArrayData(serviceDetails); //service which allow to send datas to LanguageController
    });
}]);

语言控制器

LanguageController.controller('LanguageController', function ServiceByLanguageController(
        $scope, $http, $routeParams, datas) {

    $scope.listLanguage = datas.getDatas(); // empty because of the asynchronous method
});

通过$broadcast/$emit和上的$可以很容易地在控制器之间传递数据

$broadcast-通过子作用域向下传递事件/数据
$emit-通过父作用域向上传递事件/数据
$on-当事件被捕获时做点什么

你修改后的代码，应该会像你想要的一样工作

ServiceController.controller('ServiceController', ['$scope', '$rootScope', '$routeParams', 'datas', 'GetService',
    function ServiceController($scope, $rootScope, $routeParams, datas , GetService) {

    $scope.serviceId = $routeParams.serviceId;
    $scope.serviceName = $routeParams.serviceName ;

    var paramsService = {
        serviceId : $scope.serviceId,
        serviceName : $scope.serviceName 
    };

    GetService.query(paramsService , function(serviceDetails) {
        $scope.serviceDetails = serviceDetails ;
        datas.setArrayData(serviceDetails); //service which allow to send datas to LanguageController
        // broadcast from rootScope that the data has been set
        // explanation: $rootScope.$broadcast('eventNameYouWantToGive', dataYouWantToPassIfAny);
        $rootScope.$broadcast('dataSetInServiceContoller'); // just launch event saying data is set, no data passed
    });
}]);
LanguageController.controller('LanguageController', function ServiceByLanguageController($scope, $http, $routeParams, datas) {
    // $scope.$on('eventNameYouWantToCatch', function(event, dataYouWantToCatchIfAny){})
    $scope.$on('dataSetInServiceContoller', function(event, anyDataPassed){
        console.log('optionalDataPassed', anyDataPassed);
        $scope.listLanguage = datas.getDatas(); // this should no longer be empty
    });
});

这也可以通过HTML和JS来完成，因为一个控制器是另一个控制器的子控制器，语言控制器将看到服务控制器看到的所有数据，所以您实际上不需要广播（这对同一页面上的控制器很有用，这些控制器不是分层的，而是相邻的）

<div ng-controller="ServiceController"> 
    <div ng-if="serviceDetails" ng-controller="LanguageController"> <!-- Initialize when serviceDetails of $scope is defined -->
         <!-- -->
    </div>
</div>

这样，当在服务控制器中定义$scope.serviceDetails 时，HTML将初始化语言控制器。

相关文章：