監視rootScope變量以更改progressBar值

app.controller("ListController1", ['$rootScope',function($rootScope) { 
    $rootScope.progressBar=10; 
    $rootScope.$watch(
    function() { 
     return $rootScope.progressBar; 
    }, 
    function(){ 
     alert($rootScope.progressBar); 
     alert("changed"); 
    },true) 

}]); 

app.controller("ListController2", ['$scope','$rootScope',function($scope,$rootScope) { 
    $scope.save=function() { 
    $rootScope.progressBar=20; 
    } 
}]);

我想要progressBar值形式ListController2反映回Listcontroller1中。看來我正在做一些錯誤的事情。請幫助任何人。謝謝你。監視rootScope變量以更改progressBar值

來源

2017-01-22 dpak

創建服務共享的價值，而不是將其連接到$ rootScope的。 – iblamefish

我沒有2個控制器，有12個控制器，當每個控制器中的共享值發生變化時，它應該反映在控制器中，並通過監視，以便可以更新視圖 – dpak

服務仍然是實現此目的的最佳方式。避免'$ rootScope' - 如果你必須觸及它，通常意味着你做錯了什麼。 – iblamefish

您應該考慮創建一個服務來共享進度條的狀態，而不是與$routeScope共享狀態，這是服務使用情況之一。

當在下面的代碼中按下保存按鈕時，它將更新progressService中的值。在第一個控制器中監視來自progressService的值，並相應地更新視圖。

您可以根據需要將progressService添加到儘可能多的控制器中。

var app = angular.module("app", []); 
 

 
app.factory("progressService", [function() { 
 
    var service = this; 
 
    service.progressBar = 0; 
 
    
 
    return service; 
 
}]); 
 

 
app.controller("ListController1", ["$scope", "progressService", function($scope, progressService) { 
 
    progressService.progressBar=10; 
 
    
 
    $scope.progress = progressService.progressBar; 
 
    
 
    $scope.$watch(
 
    function() { 
 
     return progressService.progressBar; 
 
    }, 
 
    function(newValue) { 
 
     $scope.progress = newValue; 
 
    }); 
 
}]); 
 

 
app.controller("ListController2", ['$scope','progressService',function($scope,progressService) { 
 
    $scope.save=function() { 
 
    progressService.progressBar=20; 
 
    } 
 
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app="app"> 
 

 
    <div ng-controller="ListController1"> 
 
    Progress: {{progress}} 
 
    </div> 
 

 
    <div ng-controller="ListController2"> 
 
    <button ng-click="save()">Save</button> 
 
    </div> 
 

 
</div>

來源

2017-01-22 17:40:52 iblamefish

監視rootScope變量以更改progressBar值

回答

相關問題