Угловая общая услуга, возвращающая нуль контроллеру

Question

Я пытаюсь обмениваться данными между двумя контроллерами в AngularJS. Данные загружаются через вызов ajax. Это хорошо работает внутри NavCtrl, но при вызове CommonBoardService.getSharedData(); из DashboardCtrl он возвращает null. Я предполагаю, что это потому, что DashboardCtrl делает вызов до того, как CommonBoardService установил данные через fetchBoards в NavCtrl. Я изо всех сил пытаюсь найти решение, чтобы обойти это. Любая помощь будет оценена по достоинству.

CommonBoardService.js

angular.module('EefApp').service('CommonBoardService', ['Restangular', function (Restangular) { 
    this.boards = null; 

    Restangular.setBaseUrl("/api"); 
    var baseBoards = Restangular.all("boards"); 

    this.fetchBoards = function() { 
    return baseBoards.getList(); 
    }; 

    this.setSharedData = function (boards) { 
    this.boards = boards; 
    }; 

    this.getSharedData = function() { 
    return this.boards; 
    } 
}]); 

NavCtrl.js

angular.module('EefApp') 
    .controller('NavCtrl', ['$scope', 'CommonBoardService', function($scope, CommonBoardService){ 

    CommonBoardService.fetchBoards().then(function(boards){ 
     $scope.allBoards = boards; 
     CommonBoardService.setSharedData(boards); 
    }, function(){ 
     console.log(res, "Error Has Occured"); 
    }); 

    }]); 

DashboardCtrl.js

angular.module('EefApp') 
    .controller('DashboardCtrl', ['$scope', 'CommonBoardService', function($scope, CommonBoardService){ 

    $scope.allBoards = CommonBoardService.getSharedData(); 

    }]); 

Answer 1

Мы используем НЕТ tify/subscribe. Вы можете создать службу, которая в основном имеет функцию подписки и функцию уведомления. Затем у вас может быть один контроллер «подписаться» на событие, например. вы можете называть его «sharedDataLoaded», а затем у вас есть другой контроллер, «уведомляющий» любого, кто слушает, что произошло событие. Для этого используется служба $ emit.

https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$emit

Answer 2

Другой подход заключается в обмене обещание:

angular.module('EefApp').service('CommonBoardService', ['Restangular', function (Restangular) { 
    this.promise = null; 

    Restangular.setBaseUrl("/api"); 
    var baseBoards = Restangular.all("boards"); 

    this.fetchBoards = function() { 
    return baseBoards.getList(); 
    }; 

    this.setPromise = function (promise) { 
    this.promise = promise; 
    }; 

    this.getPromise = function() { 
    return this.promise; 
    } 
}]); 

NavCtrl.js

angular.module('EefApp') 
    .controller('NavCtrl', ['$scope', 'CommonBoardService', function($scope, CommonBoardService){ 

    if (!CommonBoardService.getPromise()) { 
     var promise = CommonBoardService.fetchBoards(); 
     CommonBoardService.setPromise(promise); 
    }; 

    CommonBoardService.getPromise().then(function(boards){ 
     $scope.allBoards = boards; 
    }, function(){ 
     console.log(res, "Error Has Occured"); 
    }); 

    }]); 

DashboardCtrl.js

angular.module('EefApp') 
    .controller('DashboardCtrl', ['$scope', 'CommonBoardService', function($scope, CommonBoardService){ 

    if (!CommonBoardService.getPromise()) { 
     var promise = CommonBoardService.fetchBoards(); 
     CommonBoardService.setPromise(promise); 
    }; 

    CommonBoardService.getPromise().then(function(boards){ 
     $scope.allBoards = boards; 
    }, function(){ 
     console.log(res, "Error Has Occured"); 
    }); 

    }]); 

Каждый контроллер проверяет, установлено ли обещание. Если нет, один запускает XHR для получения списка boards и устанавливает обещание. Затем они используют обещание установить свои соответствующие переменные $ scope. Таким образом, неважно, какой контроллер запускается первым.