CODEWITHSUNDEEP
javascriptangularjs
LinhSaysHi
LinhSaysHi

Reputation: 642

Calling function within angular function

I'm trying to convert my $scope code to 'ControllerAs' code and I am having trouble writing a function inside my controller function.

index.html

<html ng-app="main">
    <head>
        <script src="angular.min.js"></script>
        <script src="script.js"></script>
    </head>

    <body ng-controller="MainController as mainCtrl">
        {{mainCtrl.message}}
        {{mainCtrl.result.username}}
    </body>
</html>

script.js

(function() {       

    angular.module("main", [])
        .controller("MainController", ["$http",MainController]);

    function MainController($http) {
        this.message = "Hello Angular!";
        this.result = callFunction($http);

        var callFunction = function($http) {
            return $http.get("https://api.github.com/users/robconery")
                .then(onUserComplete);      
        };

        var onUserComplete = function($response) {
            return $response.data;
        };
    };

}());

Here is the $scope code that I am trying to convert.

(function() {

  var app = angular.module("githubViewer", []);

  var MainController = function($scope, $http) {

  var onUserComplete = function(response) {
    $scope.user = response.data;
  };

  var onError = function(reason) {
    $scope.error = "Could not fetch the user";
  };


  $http.get("https://api.github.com/users/robconery")
    .then(onUserComplete, onError);


  $scope.message = "Hello, Angular!";


};

  app.controller("MainController", ["$scope", "$http", MainController]);

}());

Upvotes: 0

Views: 126

Answers (2)

NeoWang
NeoWang

Reputation: 18563

Aside from the function definition problem in @Dan's answer, there is another issue: you should not bind callFunction($http) in the template, callFunction($http) returns a Promise, it doesn't evaluates to the response, even after the onUserComplete callback.

This works for me:

function callFunction($http){
    return $http.get("https://api.github.com/users/robconery")
            .then(onUserComplete);
}
var that = this;
function onUserComplete($response){
    that.result = $response.data;
}
callFunction($http);

EDIT: Your $scope version code works fine, because in the onUserComplete() function, you assign to $scope.result, not return $response.data. You see, when you return from onUserComplete, then() doesn't return that, it still returns the promise, that's because it needs to support chaining.

Upvotes: 0

Dan
Dan

Reputation: 10548

You are invoking callFunction before it is defined. You need to either use a function declaration or move callFunction before the invocation. Here's an example of both of those choices.

Function Declaration

(function() {       

    angular.module("main", [])
        .controller("MainController", ["$http",MainController]);

    function MainController($http) {
      this.message = "Hello Angular!";
      this.result = callFunction($http);
    }

    function onUserComplete(response) {
      return response.data;
    }

    function callFunction($http) {
      return $http.get('https://api.github.com/users/robconery')
        .then(onUserComplete);
    }
}());

Or:

(function() {       

    angular.module("main", [])
        .controller("MainController", ["$http",MainController]);

    var callFunction = function($http) {
        return $http.get("https://api.github.com/users/robconery")
                .then(onUserComplete);      
    };

    var onUserComplete = function($response) {
        return $response.data;
    };

    function MainController($http) {
        this.message = "Hello Angular!";
        this.result = callFunction($http);
    }
}());

See this excellent StackOverflow answer for the differences between these two syntaxes.

Upvotes: 2

Related Questions