Question

我一直试图通过Angular ajax调用的响应来显示后端返回的一些消息。我有一个服务来共享不同控制器的数据（ShareDataService）。

'use strict';
var angularPOC = angular.module('angularPOC');
  angularPOC.factory('ShareDataService', [ '$timeout', function($timeout) {
  var messages = [];
  var service = {
    setMessage : function(messageText, messageType) {
      $timeout(function() {
        messages = [];
        messages.push({
          'text' : messageText,
          'type' : messageType});
    });
  };
  return service;
}]);

然后我有一个控制器，它依赖于服务中的数据集，并且应该根据数据变化更新视图：

'use strict';
var MessageControllers = angular.module('MessageControllers', []);
var angularPOC = angular.module('angularPOC');
angularPOC.controller('MessageController', ['$scope', '$routeParams', '$timeout', 'ShareDataService', function($scope, $routeParams, $timeout, ShareDataService) {

  $scope.shareService = ShareDataService;
  $scope.messages = ShareDataService.messages;
  $scope.$watch('ShareDataService.messages',
    function(newVal) {
      alert("newval: " + JSON.stringify(newVal));
      alert("sharedata: " + JSON.stringify(scope.shareService.messages));
      $scope.messages = newVal;
      // or
      // $scope.getMessages();
    }
  );

  $scope.getMessages = function() {
    $scope.messages = ShareDataService.getMessages();
    return $scope.messages;
  };
}]);

$ watch将捕获基础数据发生变化的“某些”事件，但“警报”将显示“newVal”为“未定义”。 'sharedata'将在更改之前打印消息。此外，当尝试使用该方法显式获取数据时，它将依赖旧数据。

但是，如果我在页面上放置一个按钮来显式调用范围内的getMessages（），它将获得正确的数据！

看起来“服务”似乎落后于$ watch的应用程序。

我已经阅读了几个关于如何使用$ watch的示例/教程，这对我来说似乎是正确的，但它不能正常工作？

请指教。谢谢。

Answer 1

我不知道背后的原因，几个月前我遇到了类似问题并通过以下方式解决了问题

$scope.$watch(function() { return ShareDataService.getMessages() }, function (){
    //your code
});

不确定这是否是正确的解决方案。如果没有别的办法可以使用它。

Answer 2

$watch无效是因为ShareDataService上没有名为$scope的媒体资源。

您已将属性命名为shareService，因此正确的$watch调用是：

$scope.shareService = ShareDataService;
$scope.$watch('shareService.messages', function(newVal) {
    $scope.messages = newVal;
});

修改正如doodeec正确指出的那样，你错过了messages上的ShareDataService属性：

var angularPOC = angular.module('angularPOC'); angularPOC.factory('ShareDataService', ['$timeout', function($timeout) { var messages = []; var service = { setMessage: function(messageText, messageType) { $timeout(function() { messages = []; messages.push({ 'text': messageText, 'type': messageType }); }); }, messages: messages }; return service; } ]);

Angular $ watch不会获得'newVal'

2 个答案: