Question

我在同一视图中有2个控制器。
- 父控制器：ServiceController（在application.js中定义 - ＆gt;＆amp; routeProvider）
- 子控制器：LanguageController（在视图中定义 - ＆gt; ng-controller）

我想将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

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


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

});

Answer 1

通过$ broadcast / $ emit和$ on

可以轻松地在控制器之间传递数据

$ 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将初始化语言控制器。

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

1 个答案: