Angularjs TypeError: undefined is not a function

Question

I'm just starting to mess with angular js and I'm trying to load the data through a post action.

I'm using angularjs v.1.0.2

Here is my code: HTML:

<!DOCTYPE html>
<html ng-app>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">

        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
        <script src="<?php echo $baseUrl?>/js/profilling/main.js"></script>
    </head>
    <body>
        <div ng-controller="GroupsCtrl">

        </div>
    </body>
</html>

main.js:

function GroupsCtrl($scope, $http) {
    $scope.url = '/file.php';
    $scope.images = [];

    function handleGroupsLoaded(data, status) {
        console.log(data);
    }

    $scope.fetch = function () {
        $http.post($scope.url).success($scope.handleGroupsLoaded);
    }

    $scope.fetch();
}

I'm trying to follow this jsfiddle: http://jsfiddle.net/simpulton/wHL3F/

But I'm getting the following error:

TypeError: undefined is not a function at http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:92:92 at i (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:76:119) at http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:76:352 at Object.e.$eval (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:86:220) at Object.e.$digest (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:84:198) at Object.e.$apply (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:86:379) at e (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:92:330) at o (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:95:407) at XMLHttpRequest.q.onreadystatechange (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:96:334)

Can anyone help?

Thanks

EDIT file.php:

echo '{"menu": {
  "id": "file",
  "value": "File",
  "popup": {
    "menuitem": [
      {"value": "New", "onclick": "CreateNewDoc()"},
      {"value": "Open", "onclick": "OpenDoc()"},
      {"value": "Close", "onclick": "CloseDoc()"}
    ]
  }
}}
';

It seems like a valid json object.

Maybe you just need to declare function handleGroupsLoaded(data, status) as $scope.handleGroupsLoaded = function(data, status) {...} — Justen

Justen Justen · Accepted Answer · 2012-11-03T03:45:22

You just need to register the handleGroupsLoaded() in the $scope

function GroupsCtrl($scope, $http) {
    $scope.url = '/file.php';
    $scope.images = [];

    $scope.handleGroupsLoaded = function(data, status) {
        console.log(data);
    }

    $scope.fetch = function () {
        $http.post($scope.url).success($scope.handleGroupsLoaded);
    }

    $scope.fetch();
}

Angularjs TypeError: undefined is not a function

1 Answers