Javascript AngularJS 1-ng在数组推送后重复不重新渲染

我正在尝试制作Angular 1中最简单的聊天应用程序

控制器代码：

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>

{{message.name}:{{{message.text}

---

尝试对$scope.messages数组进行console.log时，它会显示新值，但列表本身根本不会更改。原因可能是什么？

您已经定义了两次

ng controller=“mainCtrl”

，这将实际实例化控制器的两个不同实例，因此当您重复控制器第一个实例上的消息时，您推送的消息将位于控制器第二个实例的数组上

您只需要在周围的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>

{{message.name}:{{{message.text}

您已经定义了两次

ng controller=“mainCtrl”

，这将实际实例化控制器的两个不同实例，因此当您重复控制器第一个实例上的消息时，您推送的消息将位于控制器第二个实例的数组上

您只需要在周围的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>

{{message.name}:{{{message.text}