在http.get之后,从另一个控制器更新一个控制器中的变量值？

Question

我有两个控制器.我想使用服务将变量从一个控制器更新到另一个控制器但不更新.

我希望$scope.names控制器'select'中的变量在控制器'current'中更新并显示它

app.controller('select', ['$scope', '$http', 'myService', function($scope,$http, myService) {
$http.get('/myapp/stocknames'). 
success(function(data) {
    $scope.names=data;
    myService.names=data;
});
}]);

我正在使用myService在两个控制器之间交换数据.我已经在我的服务中宣布了.

app.service('myService', function($http, $rootScope) { this.names=[] });

app.controller('current', ['$scope', '$http', 'myService', function($scope,$http, myService) {
$scope.names=myService.names;
console.log($scope.names);  
}]);

你能帮忙吗？一旦$scope.names选择控制器中的变量更新,我应该如何使当前控制器更新数据？

据我所知,我在做什么应该工作: - /

Answer 1

存档的方法有很多种:

第一:通过观察服务变量数据的变化

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

app.service('dataService', function() {
  this.serviceData = "test";
});

app.controller('MainCtrl', function($scope, dataService) {
  $scope.mainClickHandler = function(mainData) {
    dataService.serviceData = mainData;
  }
});


app.controller('SubCtrl', function($scope, dataService) {
  $scope.name = 'World';

  $scope.getServiceData = function() {
    return dataService.serviceData;
  }

  $scope.$watch("getServiceData()", function(newValue, oldValue) {
    if (oldValue != newValue) {
      $scope.name = newValue;
    }
  });
});

http://plnkr.co/edit/G1C81qvDD179NILMMxWb

第二:

使用事件广播

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

app.factory('dataService', function($rootScope) {
  var serviceData = {
    "mydata": "test"
  };

  $rootScope.$watch(function() {
    return serviceData.mydata;
  }, function(newValue, oldValue, scope) {
    $rootScope.$broadcast('dataService:keyChanged', newValue);
  }, true);

  return serviceData;

});

app.controller('MainCtrl', function($scope, dataService) {
  $scope.mainClickHandler = function(mainData) {
    dataService.mydata = mainData;
  }
});


app.controller('SubCtrl', function($scope, $rootScope, dataService) {
  $scope.name = 'World';

  $rootScope.$on('dataService:keyChanged', function currentCityChanged(event, value) {
    console.log('data changed', event, value);
    $scope.name = value;
  });

});

http://plnkr.co/edit/tLsejetcySSyWMukr89u?p=preview

第三:

使用回调

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

app.service('dataService', function() {
  var serviceData = "test";
  var callback = null;
  this.updateServiceData = function(newData){
    serviceData = newData;
    if(null!==callback)
    {
      callback();
    }
  };

  this.getServiceData = function(){
    return serviceData;
  };

  this.regCallback = function(dataCallback){
    callback = dataCallback;
  };
});

app.controller('MainCtrl', function($scope, dataService) {
  $scope.mainClickHandler = function(mainData) {
    dataService.updateServiceData(mainData);
  }
});


app.controller('SubCtrl', function($scope, dataService) {
  $scope.name = 'World';
  $scope.dataChangeCalback = function() {
    $scope.name = dataService.getServiceData();
  }
  dataService.regCallback($scope.dataChangeCalback);
});

http://plnkr.co/edit/vrJM1hqD8KwDCf4NkzJX?p=preview