javascript - Angular 返回一个空页面，即使所有数据都在那里

Question

我第一次使用 Angular 构建网站并遇到了问题。一旦我点击“查看项目”，它应该返回特定于该项目的数据。现在，如果我 console.log 我的 js，我可以看到一切都在那里。在控制台中我还可以看到所有 html 都在那里。所以我的问题是；可能是什么原因造成的？

http://robbin-jagt.com/try1/

    angular
  .module('app')
  .controller('werkCtrl', ['$scope', '$http', '$location', function($scope, $http, $location) {
    $scope.title = "Werk";
    $scope.portfolio_items = [];
    $scope.detail_items = {};
    $scope.beschrijving = "Een verzameling van mijn favoriete werken.";

    var getPortfolioItems = function() {
        $http.get('data/work.json').success(function(data){ 
            $scope.portfolio_items = data;
        });
    }
    getPortfolioItems();

    var getDetailItem = function() {
        var route = $location.path().substring(1).split('/')[1];
        $http.get('data/work.json').success(function(data) {
            for (key in data) {
              if (data[key].slug == route) {
                $scope.detail_items = data[key];
                console.log(data);
              }
            }
        })
    }
    getDetailItem();
  }]);

正如您在这里看到的，我正在从 json 文件加载所有数据。我正在循环数据以查找引用项目的特定 url 的“slug”。这部分似乎完成了它的工作，因为每个产品都有一个独特的 slug。

<section class="web_wrapper">
<div ng-repeat="item in detail_items">
    <section class="head_image">
        <figure>
            <img ng-src="{{ item.headerimg }}"></img>
            <figcaption>
                <h1>{{ item.title }}</h1>
                <p>{{ item.beschrijvingfoto }}</p>
            </figcaption>
        </figure>
    </section>
    <section class="details">
        <h1>{{ item.name }}</h1>
        <h2>{{ item.date }}</h2>
        <img ng-src="{{item.image}}">
        <div class="text_wrap">
            <p>{{ item.beschrijving }}</p>
            <p>{{ item.beschrijving2 }}</p>
        </div>
    </section>
</div>

这是应显示上述数据的详细信息页面。

 angular
  .module('app', [
    'ui.router'
  ])
  .config(['$urlRouterProvider', '$stateProvider', function($urlRouterProvider, $stateProvider) {
    $urlRouterProvider.otherwise('/');
    $stateProvider
      .state('home', {
        url: '/',
        templateUrl: 'templates/home.html',
        controller: 'homeCtrl'
      })
      .state('about', {
        url: '/about',
        templateUrl: 'templates/about.html',
        controller: 'aboutCtrl'
      })
      .state('werk', {
        url: '/werk',
        templateUrl: 'templates/werk.html',
        controller: 'werkCtrl'
      })
      .state('werkdetail', {
        url: '/werkdetail/:slug',
        templateUrl: 'templates/werkdetail.html',
        controller: 'werkCtrl'
      })
  }])

最后这是我的路线。现在，我很抱歉没有证明 fiddle ，因为我不确定如何为 Angular 文件正确设置 fiddle 。我希望上面链接的网站能为您提供您需要的任何其他数据。

[
 {  
    "title" : "werk enzo",
    "name" : "product 1",
    "date" : "august 13",
    "image" : "http://placehold.it/400x200",
    "slug" : "product-1",
    "beschrijving" : "blabla",
    "beschrijving2" : "abba abba",
    "headerimg" : "http://placehold.it/1440x400",
    "beschrijvingfoto" : "ding over foto"
},
{   
    "title" : "werk enzo",
    "name" : "product 2",
    "date" : "august 3",
    "image" : "http://placehold.it/400x200",
    "slug" : "product-2",
    "beschrijving" : "blabla",
    "beschrijving2" : "abba abba",
    "headerimg" : "http://placehold.it/1440x400",
    "beschrijvingfoto" : "ding over foto"
},
{   
    "title" : "werk enzo",
    "name" : "product 3",
    "date" : "august 22",
    "image" : "http://placehold.it/400x200",
    "slug" : "product-3",
    "beschrijving" : "blabla",
    "beschrijving2" : "abba abba",
    "headerimg" : "http://placehold.it/1440x400",
    "beschrijvingfoto" : "ding over foto"
},
{   
    "title" : "werk enzo",
    "name" : "product 4",
    "date" : "august 29",
    "image" : "http://placehold.it/400x200",
    "slug" : "product-4",
    "beschrijving" : "blabla",
    "beschrijving2" : "abba abba",
    "headerimg" : "http://placehold.it/1440x400",
    "beschrijvingfoto" : "ding over foto"
}

]

这是我从中获取所有数据的 Json 文件。

Answer 1

这是因为您将对象而不是数组传递给模板:

    var getDetailItem = function() {
        var route = $location.path().substring(1).split('/')[1];
        $http.get('data/work.json').success(function(data) {
            for (key in data) {
              if (data[key].slug == route) {
                // data[key] is object
                $scope.detail_items = data[key];

                // you print the whole data array to console but actually passing just one object to $scope.detail_items
                console.log(data);
              }
            }
        })
    }