json数据未在模板视图中显示AngularJS

时间:2015-10-23 14:40:55

标签: javascript json angularjs

所以我一直试图在模板中显示json文件中的数据,但由于某种原因,数据没有显示。

来自app/js/controllers/controllers.js的代码

angular.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'    
    };

    //$scope.test = 9 * 5;

    //console.log($scope.klanten);

}).directive('myCustomer', ['$http', function($http) {
        //console.log($scope.klanten);
        return {
            template: 'Name: {{ klanten.voornaam }} Address: {{customer.address}}'
        };

}])

这是位于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>

这就是它在前端看起来的样子:

enter image description here

$ scope.customer只是测试数据。我真正想要的是如何从json文件中获取数据。我做错了什么?

1 个答案:

答案 0 :(得分:1)

{{test}}中没有scope。尝试在您的视图中写下{{klanten}}

它应该有用。

您正在使用这种AngularJS请求:https://docs.angularjs.org/api/ng/service/$http#shortcut-methods