观察rootScope变量以更改progressBar值

Question

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中。看来我做错了。请帮助任何人。谢谢你。

Answer 1

您应该考虑创建一个服务来共享进度条的状态，而不是与('', )共享状态 - 这是服务的用例之一。

在下面的代码中按下保存按钮时，它会更新$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;
  }
}]);