AngularJS Controller wird zweimal aufgerufen (ohne ui.router)

Ich habe ein Problem mit einem Controller in AngularJS, es wird zweimal aufgerufen und es setzt meine Array-Nachrichten zurück ... Ich möchte eine einfache Chat-Box erstellen, wo ein Benutzer eine Nachricht schreiben , klicken Sie senden, und ich zeige alle Nachrichten in einem div ...AngularJS Controller wird zweimal aufgerufen (ohne ui.router)

Das ist mein 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>

Dies ist 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>

und das ist mein 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 den richtigen Wert hat, und ich sehe die Wertg in Chat-Box, aber nach einigen Millisekunden Controller wieder geladen und die listChatMessages mit $ scope.listChatMessages = [] wiederherzustellen;

Jeder kann mir helfen? Danke im Rat!

-Code-Download: Zip-Datei: http://wikisend.com/download/780620/AngularJSControllerTwice.zip WAR-Datei: http://wikisend.com/download/635060/AngularJS-Chat.war

Quelle

2016-04-01 Hazlo8

warum ist Ihr Controller MyController statt anotherChatController –

Änderung genannt, ich semplified mein Beispiel mit einfachen Namen;) – Hazlo8

Sie es zu tun mit Server. Oder arbeiten Sie gerade an einem Kunden? –

in local_functions.js

Änderung:

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

zu:

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

Quelle

2016-04-01 09:18:30

Ich habe mein Beispiel mit einfachen Namen vereinfacht, das ist nicht der Fehler :( – Hazlo8

<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>

Versuchen

<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>

Siehe https://docs.angularjs.org/api/ng/directive/ngSubmit

Quelle

2016-04-01 09:45:40 markyph

versuchen, wie unten von $ setzen scope.listChatMessages = [] in ng-init von div in chat.html-Datei;

<div class="chat" ng-controller="myController" ng-init="listChatMessages = []"> 

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

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 = ""; 
}; 
});

Quelle

2016-04-01 10:55:07

AngularJS Controller wird zweimal aufgerufen (ohne ui.router)

Antwort

Verwandte Themen