TypeError：使用 ng-if 时无法设置未定义的属性“chat_room_id”

Question

我在这里遇到了一些障碍。

我正在开发一个聊天功能，该功能目前位于 application.html.erb 文件的 Rails 部分中。

我想要做的是在聊天区域中显示用户的朋友列表。当用户点击朋友的名字时，相应的聊天室打开，并显示用户和朋友之间的消息。如果用户希望退出聊天并再次查看他的朋友列表，用户只需单击一个按钮（当前为“查看朋友”）。

我目前正在使用 ng-if 指令在朋友和房间/消息之间切换。

我还没有完全设置好，所以我知道有错误。我在 Rails 中建立了用户友谊，在 Rails 中设置了我的 REST API，并且可以通过 Angular 和 Restangular 获取和发布资源。

然而，手头的问题是，自从我在部分中实现了 ng-if 指令后，我收到了以下错误：

TypeError: Cannot set property 'chat_room_id' of undefined

如果我要删除控制器中的 ng-if 指令和所有相应的 $scope.messagesVisible 和 $scope.friendsVisible 变量引用，表单提交工作，所以我知道它与我的实现有关ng-if 指令，以及 newMessage 未定义的事实，但我不确定为什么。

我怀疑这与 Angular 承诺有关，或者我对 Angular 承诺和 ng-if 指令缺乏了解，但如果有人能解释为什么会发生这种情况（并提供解决方案）这将是惊人的。

谢谢各位！

下面的代码（请原谅糟糕的样式 - 它是一个占位符）

rails_partial：

<section ng-app="atmosphere" ng-controller="AtmoChatCtrl" style="position:relative; top:32%; float:right; right:5px; margin-bottom:10px; margin-top:30px;">
  <div ng-if="friendsVisible" style="position:relative; left:35px; width:100px;"> 
    <% user_friendships.each do |friendship| %>
      <ul>
        <% friend = friendship.friend %>
        <% if friendship.accepted? %>
        <li style="cursor:pointer;" ng-click="setChatAttributes(<%= friend.id %>, <%= current_user.id %> );"><%= friend.name %></li>
      </ul>
      <% end %>
    <% end %>
  </div>
  <div ng-if="messagesVisible" style="position:absolute; top:60%; width: 150px; height:40%; right:-80px; margin-top:100px">
    <div>
      <p ng-repeat="message in messages">{{message.user_id}}: {{message.body}}</p>
        <form ng-submit="saveMessage();">
          <input type="text" ng-model="newMessage.body">
        </form>
    </div>
  </div>
  <div style="position:absolute; top:300px;">
    <button ng-if="messagesVisible" ng-click="viewFriends();">View Friends</button>
  </div>
</section>
<%= javascript_include_tag "angular/application" %>
<%= javascript_include_tag "http://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular-resource.min.js" %>

angular_controller：

angular.module('AtmoChatCtrl', [])
  .controller('AtmoChatCtrl', ['$scope', '$resource', '$interval','Pusher','Restangular', function ($scope, $resource, $interval, Pusher, Restangular) {

    $scope.baseMessages = Restangular.one('api/chat_rooms', 2).all('chat_messages');
    $scope.roomId = '2';
    $scope.messagesVisible = false;
    $scope.friendsVisible = true;

    console.log("SET ROOM");

    $interval(function(){
      $scope.baseMessages.getList().then(function(messages) {
        $scope.messages = messages;
      });

      console.log("POLLING");
    }, 1000);


    $scope.saveMessage = function() {
      $scope.newMessage.chat_room_id = $scope.roomId;
      $scope.newMessage.user_id = $scope.userId;
      $scope.baseMessages.post($scope.newMessage).then(function(newMessage){
                $scope.messages.push(newMessage);
                console.log("SAVED");
            })
    }

    $scope.setChatAttributes = function(roomId, userId) {
      $scope.baseMessages = Restangular.one('api/chat_rooms', roomId).all('chat_messages');
      $scope.roomId = roomId;
      $scope.userId = userId;
      $scope.messagesVisible = true;
      $scope.friendsVisible = false;
      console.log(roomId)
      console.log(userId)
    }

    $scope.viewFriends = function() {
      $scope.friendsVisible = true;
      $scope.messagesVisible = false;
    }

  }]);

Answer 1

NVM。我是个白痴。通过在第一个$scope.friendsVisible = true;之后设置$scope.newMessage = {};解决