TypeError：ng-ifを使用しているときに 'chat_room_id'プロパティが未定義に設定されていません

Question

私はここでいくつかのロードブロックを実行しています。

私は現在、application.html.erbファイルの一部のレール内にあるチャット機能に取り組んでいます。

私が探しているのは、最初にチャットエリアに表示されているユーザーの友達のリストです。ユーザーが友人の名前をクリックすると、対応するチャットルームが開き、ユーザーと友人の間のメッセージが表示されます。ユーザがチャットを終了し、再び彼のフレンドリストを見ることを望む場合、ユーザは単にボタンをクリックするだけである（現在「友達を見る」）。

現在、ng-ifディレクティブを使用して、友だちと客室/メッセージを切り替えています。

まだ完全に設定していないので、バグがあります。私はレール内でユーザーフレンドシップを作成し、REST APIをレールに設定し、AngularとRestangularを使用してGETとPOSTリソースを作成できます。しかし、手元の問題は、私は部分的でNG-IFディレクティブを実施して以来、私は次のようなエラーになっていますことを

です：私はNG-かのディレクティブを削除していた場合

TypeError: Cannot set property 'chat_room_id' of undefined 

をし、コントローラ内の対応する$ scope.messagesVisible変数と$ scope.friendsVisible変数参照のすべてが動作するので、ng-ifディレクティブの実装とnewMessageが定義されていないということが関係しています。なぜ私は確信していません。

Angular promisesとng-if指示の両方について、Angularの約束や私の理解の欠如とは関係があると思われますが、なぜこれが起こっているのかを誰かが明らかにすることができます）それは素晴らしいだろう。

ありがとうございます！

以下のコードは、（ひどいスタイリングを言い訳してください - それは、プレースホルダです）

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;