Recently, I've been attempting to showcase the data from a json file in my template but for some reason it's not showing up.
Here is the code snippet from
app/js/controllers/controllers.jsangular.module('myApp.views', ['ngRoute'])
.controller('dashboardCtrl', function($scope, $http) {
$http.get('data/klanten.json')
.success(function(data) {
$scope.klanten = data;
console.log($scope.klanten);
});
$scope.customer = {
name: 'Naomi',
address: '1600 Amphitheatre'
};
}).directive('myCustomer', ['$http', function($http) {
return {
template: 'Name: {{ klanten.voornaam }} Address: {{customer.address}}'
};
}])
The above code can be found in the view template at:
app/view/dashboard/dashboard.html<div class="container navbar-default">
<nav role="navigation">
<ul class="nav nav-pills">
<li><a href="#/views/dashboard">Dashboard</a></li>
<li><a href="#/views/profiel">Mijn profiel</a></li>
<li><a href="#/views/transacties">Mijn transacties</a></li>
<li><a href="#">Uitloggen</a></li>
</ul>
</nav>
</div>
<p>This is the partial for view 1.</p>
<p>{{ test }}</p>
<p>
<div ng-controller="dashboardCtrl">
<div my-customer></div>
</div>
</p>
This is how it appears on the front-end:
https://i.sstatic.net/KWPP7.jpg
Note that the $scope.customer is simply placeholder data. The objective is to display data from the json file, so what am I missing?