3

如果我有以下简单的控制器和服务。

<div ng-controller="MessagesCtrl">
  <ul>
    <li ng-repeat="message in data.messages">
      {{ message }}
    </li>
  </ul>
</div>

myApp.factory('Data', function () {
  var _messages = [];
  return {
    messages: _messages,
    getMessages: function() {
      $http.get('/messages').then(function(response) {
        _messages = response.data;
      });
    }
  };
});

function MessagesCtrl($scope, Data) {
  $scope.data = Data;
  $scope.data.getMessages();
}

我希望messages模型在 AJAX 请求完成并填充对象时自动更新,但事实并非如此。这应该如何工作?(我有点问这种结构的最佳实践是什么)。

编辑 - 工作解决方案:

<div ng-controller="MessagesCtrl">
  <ul>
    <li ng-repeat="message in data.messages">
      {{ message }}
    </li>
  </ul>
</div>

myApp.factory('Data', function () {
  return {       
    getMessages: function() {
      var _this = this;
      $http.get('/messages').then(function(response) {
        _this.messages = response.data;
      });
    }
  };
});

function MessagesCtrl($scope, Data) {
  $scope.data = Data;
  $scope.data.getMessages();
}
4

1 回答 1

3

我相当确定您在这里遇到了 JavaScript 问题,而不是与 AngularJS 相关的问题。让我们删除 AngularJS 相关的代码,只留下 JavaScript 部分:

function factory() {
  var _messages = [];
  return {
    messages: _messages,
    getMessages: function() {
      _messages = [1, 2, 3, 4];
    }
  }
}

> var test = factory();
undefined
> test.messages
[]
> test.getMessages()
undefined
> test.messages
[]

test.messages 指向原始 _messages 数组,而稍后 _messages 正在更改,但 test.messages 没有。

于 2013-03-07T17:33:57.427 回答