AngularJs - Verwendung von Factory-Funktionen im Controller

Question

Ich bin neu in AngularJs und stieß auf ein Problem, während ich versuche, den gleichen Code in verschiedenen Controllern zu schreiben.

Ich habe eine Fabrik erstellt, die alle Funktionen enthalten sollte, während die Steuerungen diese Funktionen verwenden können, und eine Funktion von der Steuerung in diese Fabrik verschoben. Ich habe eine Funktion erstellt, die Daten aus einem Formular posten sollte, aber wenn ich auf sie klicke, passiert buchstäblich nichts.

Ich habe eine ganze Weile auf Google und Stackoverflow gesucht und konnte kein Problem finden, das zu meinem Problem passt.

Gibt es etwas, das ich vermisst oder falsch gemacht habe?

Factory:

(function(){ 
    angular.module("myApp").factory('appServicesProvider',function($http) { 

    var restURL = "http://localhost:8080/Project/rest/api/"; 

    function postFunction(data){ 

     $http.post(restURL, JSON.stringify(data)).then(
       function(response){ 
       }   
     ); 
    } 

    return{postFunction:postFunction} 

}); 
})(); 

Controller:

(function() { 

angular.module("myApp") 
.controller("AdminController",function($scope, $http, appServicesProvider) { 

$scope.restURL = "http://localhost:8080/Project/rest/api/"; 

)}; // There's more code but it's irrelevant to the function I'm talking 
     about 

HTML:

<div id="postFunctionDiv" class="form-group row"> 
    <div class="col-xs-4"> 
    <label>PostFunction</label> 

<!--- 
Some form inputs 
---!> 

<button class="btn btn-success" ng- 
click="appServicesProvider.postFunction(data)" >Execute</button> 
</div> 

Answer 1

ng-click sollte eine Scope-Funktion in der Steuerung aufrufen, anstatt zu versuchen, direkt ein Verfahren in der Fabrik zu nennen. Diese Controller-Funktion wird die Factory-Methode aufrufen. Beispiel:

Controller:

(function() { 

angular.module("myApp") 
.controller("AdminController",function($scope, $http, appServicesProvider) { 

$scope.restURL = "http://localhost:8080/Project/rest/api/"; 

$scope.postFn = function(data) { 
    appServicesProvider.postFunction(data); 
}; 

)}; // There's more code but it's irrelevant to the function I'm talking 
     about 

HTML:

<div id="postFunctionDiv" class="form-group row"> 
    <div class="col-xs-4"> 
    <label>PostFunction</label> 

<!--- 
Some form inputs 
---!> 

<button class="btn btn-success" ng- 
click="postFn(data)" >Execute</button> 
</div> 

Answer 2

Das Problem mit appServicesProvider ‚s postFunction wird nicht aufgerufen, weil Sie appServicesProvider Service unter $scope nicht angezeigt haben. Kurz gesagt, was in $scope ausgesetzt ist, wird auf HTML zugänglich sein.

angular.module("myApp") 
.controller("AdminController",function($scope, $http, appServicesProvider) { 

    $scope.appServicesProvider = appServicesProvider 

)}; 

---

Above wird nur Ihr Problem lösen, das wäre nicht gut Weg zu gehen, wie Sie alles aus dem Dienst auf HTML unnötig ausgesetzt. Lieber nur gewünschte Service-Methode auf $scope ausgesetzt, indem Sie Ihre eigene Methode postFunction erstellen.

angular.module("myApp") 
.controller("AdminController", 
function($scope, $http, appServicesProvider) { 
    $scope.postFunction = function (data) { 
     appServicesProvider.postFunction(data) 
    } 
} 
); 

HTML

ng-click="postFunction(data)"