Question

我的角色服务设置如 -

function updateViewService($http, $interval) {
var change = true;
var grabTimeStamp = function(){
    $http.get('someapi').then(function success(response){
        //some logic to change var change according to the response
}
$interval(grabTimeStamp, 10000);
return { refresh: function(){
        return change;
    }};
}

现在我需要做的是在控制器中返回change，并在服务change发生变化时立即更新控制器变量。

我怀疑在控制器中，服务返回函数只返回一次值。所以我在调用服务时在我的控制器中尝试了$interval，它也没有更新控制器变量。

我有很多控制器，这就是为什么我做了一个应该更新所有控制器的服务。

然后，只要$rootScope.$broadcast变量发生变化，我就会尝试change。试图用$scope.$on收听控制器中的广播，但没有奏效。

if(change === true){
    $rootScope.$broadcast('dataChanged',change);
    change = false;
}

这样做的理想方法是什么？

基本上我想做的是 -

创建一个每十秒发出一次请求的服务并更新change变量（完成）
将此变量传递给控制器并更新视图（基本上向后端发出请求并获取新数据{卡}}

感谢。

Answer 1

您想知道服务中的变更变量何时更改值？

您可以使用$scope.$watch。

angular.module('app', []);

angular.module('app').service('someService', function ($interval, $q) {
  var change = 0;
  
  $interval(function () {
    $q.resolve(Math.random()) //some promise, maybe from $http, but for sake of simplicity I will use $q.resolve
      .then(function (result) {
        change = result; //setting change to random value
      });
  }, 1000); //changes every second
  
  return {
    getChange: function () {
      return change;
    }
  };
});

angular.module('app').controller('Example', function ($scope, someService) {
  $scope.$watch(someService.getChange, function (change) { ///adding watcher on someService.getChange, it will fire when change changes value
    this.change = change; //setting change to controller here you can put some extra logic
  }.bind(this));
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.js"></script>
<div ng-app="app" ng-controller="Example as Ex">
  {{Ex.change}}
</div>

虽然事件也应该有用，但是要分享你的代码的一些例子（jsfiddle，snippet或类似的东西）？

Answer 2

您可以做的是创建一个简单的轮询服务。它会以指定的间隔发出请求。我将如何做到这一点：

function updateViewService($http, $timeout) {
  var grabTimeStamp = function(callback) {
    return $http.get('someapi').then(function success(response) {
      //some logic to change var change according to the response
      return response.data;
    });
  }

  var poll = function(action, interval) {
    return $timeout(function() {
      grabTimeStamp()
        .then(action)
        .then(poll.bind(null, action, interval))
    }, interval);
  };

  return {
    grabTimeStamp: grabTimeStamp,
    poll: poll
  }
}

app.factory('dataService', updateViewService);

然后你会在控制器中使用它：

dataService.poll(function(data) {
  $scope.data.push(data);
}, 1000);

演示： http://plnkr.co/edit/MWBlhJzJUh7UJSCJdfPg?p=info

Answer 3

您提供的事件解决方案应该可以工作，但服务必须在控制器中注入infact服务必须由Angular在控制器之前实例化。

.service(function updateViewService($http, $interval, someService) {
var change = true;
var grabTimeStamp = function(){
$http.get('someapi').then(function success(response){
  //some logic to change var change according to the response
  if(change === true){
    $rootScope.$broadcast('dataChanged',change);
    change = false;
  }
}
$interval(grabTimeStamp, 10000);

})

.controller(function($rootScope, updateViewService){
  $rootScope.$on('dataChanged', function(){
    //do something
  });
})

AngularJS服务更新控制器变量

3 个答案: