通过控制器和 $stateParams 将数据从服务传递到模板

Question

我有一个代码如下的服务：

.service('ChatService', function() {
  return { //Gets Data from controller
    sendData: function(data) { 
      this.chatData = data;
      console.log('this.chatData: '+this.chatData);
    },
    chats: this.chatData,
    getChats: function() {
      return this.chatData;
    },
    getChat: function(chatId) {
      for(i=0; i<this.chats.length; i++) {
        if (this.chats[i].id == chatId) {
          return this.chats[i];
        }
      }
    }
  }
})

这里重要的是 sendData 检索信息

[{id: 1, message: "Chat Message 1"},{id: 2, message: "Message 2"}]

来自控制器。 Services 中的 getChats 然后由同一控制器调用 $scope.chats = ChatService.getChats(); 以显示在模板中。当单击该项目时，将显示一个包含更多信息的新页面，因此服务中的 getChat 和 getChats 函数。页面控制器中用于加载更多详细信息的代码是

$scope.chatId = $stateParams.chatId;
$scope.chat = ChatService.getChat($scope.chatId);

但是我收到错误无法读取未定义的属性长度。现在，如果我将服务中的 chats: this.ChatData 更改为

chats: [{id: 1, message: "Chat Message 1"},{id: 2, message: "Message 2"}]

它就像一个魅力，但我需要它来实时显示控制器中的内容，因为我正在从服务器下载和接收信息，这些信息将实时更新用于聊天应用程序。

Answer 1

使用angular.copy更新引用：

app.service('ChatService', function() {
    //Gets Data from controller
    this.sendData = function(data) { 
      //this.chatData = data;
      //console.log('this.chatData: '+this.chatData);
      //Use angular.copy
      angular.copy(data, this.chats);
    };
    this.chats = [];
    this.getChats = function() {
      return this.chats;
    };
    this.getChat =  function(chatId) {
      for(i=0; i<this.chats.length; i++) {
        if (this.chats[i].id == chatId) {
          return this.chats[i];
        };
      };
    };
});

通过使用 angular.copy 更新数组引用，之前获取引用的控制器将得到更新。

有关详细信息，请参阅 AngularJS angular.copy API Reference.

通过控制器和 $stateParams 将数据从服务传递到模板

Passing Data from Service to Template via Controller and $stateParams

angularjs

angularjs-scope

angularjs-controller

angular-services