Service in Winkel js nicht aktualisieren

Question

Ich machte einen Service namens Beispielservice, in dem ich eine Funktion namens dividee(). Unten ist der Code:

confusionapp.service('exampleservice', function($rootScope) { 
    this.dividee = function(x, y) { 
     $rootScope.enteredone = x; 
     $rootScope.enteredtwo = y; 
     $rootScope.showdivideresult = x/y; 
    } 
}); 

Nun machte ich 2 Eingänge, wo ich die Werte eingeben, und ich dachte, dass ich den geteilten Wert in der unten div bekommen würde:

confusionapp.controller("conFusionappCtrl", function($scope, exampleservice) { 
    exampleservice.dividee(10, 3); 
}); 

html:

<input type="text" ng-model="enteredone" /> 
<input type="text" ng-model="enteredtwo" /> 
<button ng-click="dividee(enteredone, enteredtwo);"></button> 
<div>{{showdivideresult}}</div> 

aber was passiert ist tat ich bekomme die Werte in die Textfelder eingefügt und die geteilten Werte im div auf Last (dh 10 und 3 in den Textfeldern und 3,33 in div), aber nicht, wenn ich einen Wert in ändern die Textfelder. Bitte helfen Sie. Vielen Dank im Voraus

Answer 1

Sie sollten nicht $rootScope in service verwenden. Erstellen Sie die Funktion, die die gewünschte Operation ausführt und Daten zurückgibt.

Sie müssen auch eine Funktion dividee im Steuerungsbereich definieren, um sie aus der Ansicht zu verwenden.

var confusionapp = angular.module('confusionapp', []); 
 
confusionapp.service('exampleservice', function() { 
 
    //Perform operation on input and return data 
 
    this.dividee = function(x, y) { 
 
    return x/y; 
 
    } 
 
}); 
 

 
confusionapp.controller("conFusionappCtrl", function($scope, exampleservice) { 
 
    //define the dividee which will be execute on click handler 
 
    $scope.dividee = function(enteredone, enteredtwo) { 
 
    //persists the returned data 
 
    $scope.showdivideresult = exampleservice.dividee(enteredone, enteredtwo); 
 
    } 
 

 
    //Set default values 
 
    $scope.enteredone = 10; 
 
    $scope.enteredtwo = 3; 
 
    //Call method to set initial value 
 
    $scope.dividee($scope.enteredone, $scope.enteredtwo); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="confusionapp" ng-controller="conFusionappCtrl"> 
 
    <input type="text" ng-model="enteredone" /> 
 
    <input type="text" ng-model="enteredtwo" /> 
 
    <button ng-click="dividee(enteredone, enteredtwo);">Divide</button> 
 
    <div>{{showdivideresult}}</div> 
 
</div>

Answer 2

Die Antwort ist in dieser Zeile <div>{{showdivideresult}}</div>

Wenn Sie dies in der Vorlage schreiben {{showdivideresult}} Sie den Steuerungsbereich variabel drucken, nicht die $ rootScope.

confusionapp.controller("conFusionappCtrl", function($scope, exampleservice){ 

$scope.showdivideresult = 'That the variable you are printing'; 


}); 

Sie den $ rootScope Dienst mit dem Steuerungsbereich nicht zu verwechseln (dies ist Sie in Ihrer Vorlage verwenden).

Damit dies funktioniert, müssen Sie den Wert von der Servicefunktion an Ihren Controller zurückgeben und ihn in den Controller-Bereich einfügen.

$scope.dividee = function(value1, value2) { 
    $scope.showdivideresult = exampleservice.dividee(value1, value2); 
    } 

Answer 3

Sein, weil die dividee Funktion nicht ein Teil des conFusionappCtrl Controller ist, so dass es nicht gefunden werden kann.

Was zunächst geschieht, ist, wenn Sie die Seite neu laden die exampleservice.dividee(10,3); ausgeführt wird und die Werte für enteredone, enteredtwo und showdivideresult gesetzt und gebunden an den View-Elementen.

Sie müssen dem Steuerungsbereich eine Funktion hinzufügen, um das Klickereignis der Schaltfläche zu verarbeiten.

confusionapp.controller("conFusionappCtrl", function($scope, exampleservice){  

    this.divide = function(x,y){  
     exampleservice.dividee(x,y); 
    }  
}); 

Und nennen Sie diese Funktion in ng-click

<button ng-click="divide(enteredone, enteredtwo);"></button>