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>