AngularJs - コントローラの工場機能を使用

Question

私はAngularJsを初めて使っていて、別のコントローラに同じコードを書くのを避けようとしているときに問題が発生しました。

すべての機能を保持するファクトリを作成しましたが、コントローラはこれらの機能を使用でき、コントローラからそのファクトリにファンクションを移動しました。 フォームからデータをポストする関数を作成しましたが、それをクリックして実行すると、文字通り何も起こりません。

私はかなりの時間Googleとstackoverflowを検索していて、私の問題に合った問題は見つかりませんでした。

私が逃した、または間違ったことがありますか？

工場：

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

}); 
})(); 

コントローラー：

(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ではなく、直接工場内でメソッドを呼び出すことを試みるよりも、コントローラ内スコープ関数を呼び出す必要があります。そのコントローラ関数は、ファクトリメソッドを呼び出すものになります。例：

コントローラー：

(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

appServicesProvider年代の問題点あなたが$scopeにappServicesProviderサービスを公開していないため、が呼び出されていません。要するに、$scopeに公開されているものはhtmlでアクセス可能です。上記

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

    $scope.appServicesProvider = appServicesProvider 

)}; 

---

ちょうどあなたが不必要にHTML上のサービスからすべてを暴露としてのために行くには良い方法ではないことを、あなたの問題を解決します。あなた自身のメソッドpostFunctionを作成して、$scopeに希望のサービスメソッドのみを公開します。

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

HTML

ng-click="postFunction(data)"