$ rootScope並將數據從控制器傳遞到服務

Question

我正在使用angular js，並且有一個看起來像這樣的控制器

myApp = angular.module("myApp.controllers", []);
myApp.controller("ScheduleCtrl", function($scope, $http, ScheduleService){
    $scope.hours = 4;
    ScheduleService.test();
    ScheduleService.initializeSchedule();
});

和一個服務（在另一個文件中）看起來像這樣

myApp = angular.module('myApp.services', []);
myApp.factory('ScheduleService', ['$rootScope', function($rootScope){

    return {
        test : 
            function(){
                alert("Test");
            },
        initializeSchedule : 
            function(){
                alert($rootScope.hours);
            }
    };
});

為了確保每個人都可以正確地將它們從服務連接到控制器，控制器內部對“ test（）”的第一次調用會在警報框中生成所需的輸出。 但是，對於下一個功能（目前應向其發出“ 4”警報），其將向“未定義”警報。

我如何使用$ rootScope或其他東西來將范圍變量用於我的服務。

Answer 1

您需要將$rootScope注入到控制器中，並使用$rootScope而不是$scope. DEMO

myApp.controller("ScheduleCtrl", function($scope, $rootScope, $http, ScheduleService){
    $rootScope.hours = 4;
    ScheduleService.test();
    ScheduleService.initializeSchedule();
});

但是在這種情況下，您不需要使用$rootScope. 您可以將數據作為參數傳遞給服務功能。

return {
    test : 
        function(){
            alert("Test");
        },
    initializeSchedule : 
        function(hours){
            alert(hours);
        }
};

Answer 2

如何在控制器和視圖中使用Angular $ rootScope

要在應用程序控制器之間共享全局屬性，可以使用Angular $ rootScope。 這是共享數據的另一種選擇。

跨控制器共享通用功能的首選方法是服務，您可以使用$ rootscope來讀取或更改全局屬性。

所有其他作用域都是根作用域的后代作用域，因此請明智地使用$ rootScope。

var app = angular.module('mymodule',[]);
app.controller('Ctrl1', ['$scope','$rootScope',
  function($scope, $rootScope) {
    $rootScope.showBanner = true;
}]);

app.controller('Ctrl2', ['$scope','$rootScope',
  function($scope, $rootScope) {
    $rootScope.showBanner = false;
}]);

在模板中使用$ rootScope（使用$ root訪問屬性）：

<div ng-controller="Ctrl1">
    <div class="banner" ng-show="$root.showBanner"> </div>
</div>

Answer 3

問題在於$ scope是為您的控制器創建的隔離范圍。 您需要將$ rootScope注入到控制器中，並在其上修改小時數，以使其顯示在服務中。

在此處查看有關范圍層次結構的更多信息。

控制器：

angular.module('myApp', []).controller('ExampleController', ['$scope', '$rootScope', 'ScheduleService', function($scope, $rootScope, ScheduleService) {
  $scope.hours = 4;
  $rootScope.hours = 42;
  ScheduleService.test();
  ScheduleService.initializeSchedule();
}]);

服務：

angular.module('myApp')
.factory('ScheduleService', function($rootScope) {
  return {
        test : 
            function(){
                alert("Test");
            },
        initializeSchedule : 
            function(childScopeHours){
                alert($rootScope.hours);
            }
    };
});

工作plnkr。