Angularjs TypeError: undefined is not a function
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.
Answer
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();
}