0

AngularJS'de bir denetleyiciyle ilgili bir sorunum var, iki kez çağrılıyor ve dizi iletileri sıfırlanıyor ... Kullanıcının mesaj yazdığı basit bir sohbet kutusu oluşturmak istiyorum , AngularJS denetleyicisi iki kez çağrıldı (hiçbir ui.router olmadan)

Bu

benim index.html olduğunu ... göndermek tıklayıp bir div ben tüm mesajları göster:

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

Bu myChat.html geçerli:

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

ve bu benim local_functions olduğunu .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 = ""; 
    }; 
}); 

Dizi messages.push doğru değere sahiptir ve sohbet kutusuna valuee görüyoruz ama bazı milisaniye kontrolörü tekrar yüklendikten sonra ve $ ile listChatMessages geri scope.listChatMessages = [];

Herkes bana yardım edebilir mi? Tavsiyede teşekkürler!

Kod indir: zip dosyası: http://wikisend.com/download/780620/AngularJSControllerTwice.zip savaş dosyası: local_functions.js içinde http://wikisend.com/download/635060/AngularJS-Chat.war

+0

, ben basit isimlerle de beni örnek semplified;) –

+0

değişim bunun myController adlandırılmasının nedeni

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

+0

Eğer uğraşıyoruz sunucu ile. Ya da sadece müşteri üzerinde çalışıyorsunuz? –

cevap

0

değişimi:

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

için:

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

Basit isimlerle örneğimi basitleştirdim, hata değil: – Hazlo8

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

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

0

$ koyarak aşağıdaki gibi deneyin görün

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

deneyin scope.listChatMessages = [] chat.html dosyasında div ng-init;

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

Denetleyiciniz yerine anotherChatController