I recently started learning AngularJS and I'm facing an issue with passing JSON data from the controller to a directive. When I try to display the data, nothing shows up and I encounter the following errors:
1. Uncaught SyntaxError: Unexpected token } on line 29.
- angular.js:38 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.14/$injector/modulerr?p0=myApp&p1=Error%3A%…gleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A17%3A381)
I'm unsure about how to resolve these errors.
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<div ng-app="myApp" ng-controller="customersCtrl">
<display simo='simo'></display>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.jsonp("http://localhost/json/customer.php?callback=JSON_CALLBACK")
.success(function (data) {
$scope.simo = data;
console.log($scope.simo)
});
});
app.directive('display',function(){
return {
restrict: 'E',
scope: { simo: '=' },
template: '<li ng-repeat="x in simo">{{ x.Name + ', ' + x.Country }}</li>'
};
});
</script>
Edit: The content of the remote file is as follows:
{
"records": [
{
"Name": "Alfreds Futterkiste",
"City": "Berlin",
"Country": "Germany"
},
{
"Name": "Ana Trujillo Emparedados y helados",
"City": "México D.F.",
"Country": "Mexico"
},
// More data entries...
{
"Name": "Comércio Mineiro",
"City": "São Paulo",
"Country": "Brazil"
}
]
}