AngularJS 1 - NG-不重複陣推後重新渲染

Question

我試圖在角1

控制器代碼simpliest聊天應用：

app.controller('mainCtrl', function ($scope, $rootScope, $routeParams, $location, $http) { 
    $scope.messages=[{'name':'user','text':'test'}]; 
    $scope.submitMessage = function() { 
    $scope.messages.push({'name':'newuser','text':$scope.mymessage}); 
} 
}); 

模板：

<div class="page-content" ng-controller="mainCtrl" ng-init="init()"> 
<div class="messages"> 
<p class="chat-message" ng-repeat="message in messages"><span class="username">{{message.name}}: </span>{{message.text}}</p> 
</div> 
<div style="clear:both"></div> 
<form ng-submit="submitMessage()" ng-controller="mainCtrl"> 
    <input type="text" ng-model="mymessage" class="message-input" ></input> 
</form> 

當試圖console.log $ scope.messages數組時，它顯示新的值，但列表本身根本不會改變。可能是什麼原因？

Answer 1

你有ng-controller="mainCtrl"定義了兩次，這實際上將實例控制器的2個不同的實例，所以你推會在你的控制器的秒實例的陣列上的信息，當你重複了消息那就是你的控制器的第一個實例。

您只需要在周圍的div上嵌套該標籤的所有內容都可以訪問控制器上的$scope。

<div class="page-content" ng-controller="mainCtrl" ng-init="init()"> 
    <div class="messages"> 
    <p class="chat-message" ng-repeat="message in messages"><span class="username">{{message.name}}: </span>{{message.text}}</p> 
    </div> 
    <div style="clear:both"></div> 
    <form ng-submit="submitMessage()"> 
    <input type="text" ng-model="mymessage" class="message-input"/> 
    </form> 
</div>