Question

我在AngularJS中遇到一个控制器问题，它被调用两次并重置我的数组消息...我想创建一个简单的聊天框，用户在其中写一条消息，点击发送并在div中显示所有消息......

这是我的index.html：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <link rel="stylesheet" type="text/css" href="theme.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
    <script src="local_functions.js"></script>
    <meta charset="UTF-8">
    <title>Chat v0.1</title>
</head>
<body ng-app="myApp">

        <h1>Welcome in Chat v0.1</h1>
        <div ng-include="'myChat.html'"></div>

</body>
</html>

这是myChat.html：

<div class="chat" ng-controller="myController">

  <h2>Chat altro utente</h2>
  <div class="chatbox">
    Messaggi inviati:
    <div ng-repeat="message in listChatMessages">
      <div>Messaggio: {{message.text}}</div>
    </div>
  </div>

  <form class="messageForm" action="index.html" method="post">
    <input type="text" name="msg" value="" placeholder="Write a message..." ng-model="messageText" autocofucs="autocofucs"/>
    <input type="submit" name="sendMsg" value="Invia" ng-click="sendMessage()"/>
  </form>

</div>

这是我的local_functions.js：

var myApp = angular.module('myApp', []);

myApp.factory('chatService', function() {
    var lastMessage = "";

    return {
        getMessage : function() {
            return lastMessage;
        },
        setMessage : function(messages, msg) {
            messages.push({
                text: msg,
            });
            lastMessage = msg;
        }
    };
});

myApp.controller('myController', function($scope, chatService) {
    $scope.messageText = "";
    $scope.listChatMessages = [];

    $scope.sendMessage = function() {
        chatService.setMessage($scope.listChatMessages, $scope.messageText);
        $scope.messageText = "";
    };
});

Array messages.push具有正确的值，我在聊天框中看到了值，但是在再次加载了一些毫秒控制器之后，它使用$ scope.listChatMessages = []恢复了listChatMessages;

任何人都可以帮助我吗？谢谢你的建议！

代码下载： zip文件：http://wikisend.com/download/780620/AngularJSControllerTwice.zip 战争文件：http://wikisend.com/download/635060/AngularJS-Chat.war

Answer 1

在local_functions.js

中

改变：

myApp.controller('myController', function($scope, chatService)

为：

myApp.controller('anotherChatController', function($scope, chatService)

Answer 2

<form class="messageForm" action="index.html" method="post">
<input type="text" name="msg" value="" placeholder="Write a message..." ng-model="messageText" autocofucs="autocofucs"/>
<input type="submit" name="sendMsg" value="Invia" ng-click="sendMessage()"/></form>

尝试

<form class="messageForm" ng-submit="sendMessage()">
<input type="text" name="msg" value="" placeholder="Write a message..." ng-model="messageText">
<input type="submit" name="sendMsg" value="Invia"> </form>

请参阅https://docs.angularjs.org/api/ng/directive/ngSubmit

Answer 3

通过在chat.html文件中的div的ng-init中放入$ scope.listChatMessages = []来尝试如下;

 var myApp = angular.module('myApp', []);

myApp.factory('chatService', function() {
var lastMessage = "";

return {
    getMessage : function() {
        return lastMessage;
    },
    setMessage : function(messages, msg) {
        messages.push({
            text: msg,
        });
        lastMessage = msg;
    }
 };
 });

 myApp.controller('myController', function($scope, chatService) {
$scope.messageText = "";

$scope.sendMessage = function() {
    chatService.setMessage($scope.listChatMessages, $scope.messageText);
    $scope.messageText = "";
};
});

useLibrary org.apache.http.legacy

AngularJS控制器被调用两次（没有ui.router）

3 个答案: