Angular $watch 没有得到'newVal'答案

【问题标题】：Angular $watch does not get 'newVal'Angular $watch 没有得到'newVal'
【发布时间】：2014-03-28 21:46:03
【问题描述】：

我一直在尝试显示后端返回的一些消息，其中包含对 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 的示例/教程，这对我来说似乎是正确的，但是它不能按预期工作？

请指教。谢谢。

【问题讨论】：

标签： angularjs

【解决方案1】：

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

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

不确定这是否是正确的解决方案。如果没有其他方法适合您，请使用它。

【讨论】：

哇。你只是给了我一种温暖的模糊感觉，当你试图让某件事工作很长时间并最终成功时，你会得到这种感觉。 :D 效果很好。

【解决方案2】：

您的$watch 不起作用是因为您在$scope 上没有名为ShareDataService 的属性。

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

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

编辑： 正如 doodeec 正确指出的那样，您也缺少 ShareDataService 上的 messages 属性：

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;
    }
]);

【讨论】：