Question

我试图在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>

在尝试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>

AngularJS 1 - ng-repeat在阵列推送后不重新渲染

1 个答案: