AngularJS denetleyicisi iki kez çağrıldı (hiçbir ui.router olmadan)

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)

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

kaynak

2016-04-01 Hazlo8

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

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

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

değişimi:

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

için:

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

kaynak

2016-04-01 09:18:30

Basit isimlerle örneğimi basitleştirdim, hata değil: – 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>

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

kaynak

2016-04-01 09:45:40 markyph

$ 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

kaynak

2016-04-01 10:55:07

AngularJS denetleyicisi iki kez çağrıldı (hiçbir ui.router olmadan)

cevap

İlgili konular