Question

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

我正在处理聊天功能，该功能目前位于application.html.erb文件的rails部分内。

我要做的是最初在聊天区域中显示用户朋友的列表。当用户点击朋友的姓名时，将打开相应的聊天室，并显示用户和朋友之间的消息。如果用户希望退出聊天并再次查看他的朋友列表，则用户只需单击按钮（当前＆＃34;查看朋友＆＃34;）。

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

我还没有完全设置好，所以我知道有bug。我在rails中创建了用户友谊，在rails中设置了我的REST API，并且可以通过Angular和Restangular来获取和POST资源。

然而，手头的问题是，自从我在partial中实现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.newMessage = {};

之后设置$scope.friendsVisible = true;来解决问题

TypeError：无法设置属性＆＃39; chat_room_id＆＃39;使用ng-if

1 个答案: