AngularJs - Using factory functions in controller

Question

I'm new to AngularJs and encountered a problem while trying to avoid writing the same code in different controllers.

I've created a factory that should hold all functions, while the controllers are able to use these functions, and moved a function to that factory from the controller. I created a function which should post data from a form, but when I click on it to execute, literally nothing happens.

I've searched quite a while on google and stackoverflow and couldn't find any issue that fits my problem.

Is there something I missed or did wrong?

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>

Kyle Olson · Accepted Answer · 2017-08-08 15:10:12Z

3

ng-click should call a scope function within the controller, rather than attempting to call a method within the factory directly. That controller function will be what calls the factory method. Example:

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>

answered Aug 8, 2017 at 15:10

Kyle Olson

1219 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dor Golan Over a year ago

Ah! I see what you did there :) Thank you so much!!

Pankaj Parkar · Accepted Answer · 2017-08-08 15:24:31Z

1

The problem with appServicesProvider's postFunction isn't getting called because, you haven't exposed appServicesProvider service on $scope. In short whatever exposed in $scope will be accessible on html.

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

   $scope.appServicesProvider = appServicesProvider

)};

Above will just solve your problem, that wouldn't be good way to go for as you exposed everything from service on HTML unnecessarily. Rather exposed only desired service method on $scope by creating your own method postFunction.

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

HTML

ng-click="postFunction(data)"

edited Aug 8, 2017 at 15:24

answered Aug 8, 2017 at 15:07

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

3 Comments

Pankaj Parkar Over a year ago

@DorGolan my bad. I had typo in my code. I corrected. Can you try please?

Dor Golan Over a year ago

Now it's the same code as Kyle suggested above, which works :) Thanks!

Pankaj Parkar Over a year ago

@DorGolan yeah.. I had that before as well, but missed to change the function name :) I didn't copied from his code :p

Collectives™ on Stack Overflow

AngularJs - Using factory functions in controller

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related