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

AJAX リクエストが完了してオブジェクトが満たされると、モデルが自動更新されることを期待してmessagesいますが、そうではありません。これはどのように機能するはずですか?(私は、この構造のベストプラクティスは何かを尋ねています)。

編集 - 実用的なソリューション:

<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