Angular Service überschreibt sich selbst, wenn mehr als einmal aufgerufen

Ich habe eine Chat-Komponente, die eine Hash-ID von diesem Chat haben. Alle meine api-Anrufe (vom Dienst erledigt) haben einen Hash-Wert. Wenn ich meine Chat-Komponente zweimal anrufe, wird der Service-Hash-Wert des ersten Chats vom Sekunden-Chat überschrieben.Angular Service überschreibt sich selbst, wenn mehr als einmal aufgerufen

angular.module('testModule', []) 
 
    .controller('testController', function(testService, $scope) { 
 
    var vm = this; 
 

 
    vm.init = function() { 
 
     vm.hash = vm.hash(); 
 
     testService.setHash(vm.hash); 
 
    } 
 

 
    vm.getServiceHash = function() { 
 
     vm.serviceHash = testService.hash; 
 
    } 
 

 
    vm.init(); 
 
    }) 
 
    .service('testService', function() { 
 
    var testService = { 
 
     hash: null 
 
    }; 
 

 
    testService.setHash = function(hash) { 
 
     testService.hash = hash; 
 
    } 
 

 
    return testService; 
 
    }) 
 
    .directive('test', function() { 
 
    return { 
 
     restrict: 'E', 
 
     template: $("#test\\.html").html(), 
 
     controller: 'testController', 
 
     controllerAs: 'test', 
 
     bindToController: { 
 
     hash: '&', 
 
     }, 
 
     scope: {} 
 
    } 
 
    }); 
 

 
var app = angular.module('myApp', ['testModule']); 
 
app.controller('myController', function($scope) {})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script> 
 

 
<body> 
 
    <div ng-app="myApp" ng-controller="myController"> 
 
    <test hash="'123'"></test> 
 
    <test hash="'321'"></test> 
 
    </div> 
 

 
    <script type="text/ng-template" id="test.html"> 
 
    <p> 
 
     <h2> Controller hash: {{test.hash}} </h2> 
 
     <button type="button" ng-click="test.getServiceHash()">Get service hash</button> 
 
     <h2> Service hash: {{test.serviceHash }} </h2> 
 
    </p> 
 
    </script> 
 

 
</body>

Quelle

2016-09-19 Guilherme Reda

Dienste werden nur einmal in Angular instanziiert. Wenn Sie Ihren Dienst benötigen, um mehr als einen Client zu bedienen (dh zwei Ihrer Chat-Komponenten), müssen Sie Ihren Dienst dafür anpassen. – jjmontes

Hast du irgendwelche Vorschläge @jjmontes? –

Dies ist ein guter Anwendungsfall für die Objektorientierung in Angular. Jeder Ihrer Hash-Aufrufe an Ihren 'Service' kann ein neues JS-Objekt zurückgeben, das diesem bestimmten Client zugeordnet ist. In AJS ist eine "Dienstleistung" einfach "syntaktischer Zucker" auf einer "Fabrik" und Dienstleistungen sind immer Singletons wie erwähnt. Hier ist ein Beispiel, wie Sie eine Objektfabrik in AJS erstellen können: http://blog.revolunet.com/blog/2014/02/14/angularjs-services-inheritance/ – MoMo

Wie @jjmontes in einem Kommentar erwähnt, sind Dienste Singletons in Angular. Daher sollten sie keinen Staat aufrechterhalten, es sei denn, dieser Staat gilt für alle Verbraucher. Zum Beispiel kann ein gemeinsamer Satz von Daten, der für alle Verbraucher gilt, einmal abgerufen und dann von allen verwendet werden, anstatt einen möglicherweise teuren Anruf erneut zu tätigen. Alle Controller-spezifischen Daten sollten jedoch in der Steuerung beibehalten und bei Bedarf an den Service übergeben werden.

In Ihrem Fall sollten Sie den Hash-Wert für den Dienst nicht festlegen, sondern ihn als Parameter an die von den Controller-Instanzen aufgerufene Dienstmethode übergeben.

.service('testService', function() { 
    var testService = { 
    }; 

    testService.callService = function(hash) { 
    // call an API or whatever, passing the hash 
    } 

    return testService; 
})

Quelle

2016-09-19 18:46:43 GalacticCowboy

Wäre es falsch für mich, ein zu verwenden Klasse und erstellen Sie eine neue Instanz für jeden Controller? –

@GuilhermeReda Ich denke nicht, dass es unbedingt "falsch" wäre. Hängt davon ab, wie Sie es verwenden möchten. Klingt so, als ob du grundsätzlich ein View-Modell willst. Was ist eine echte Sache mit vielen Anwendungen. – GalacticCowboy

Angular Service überschreibt sich selbst, wenn mehr als einmal aufgerufen

Antwort

Verwandte Themen