ビューによる角度指令バグ

Question

私は、角度指令で非常に簡単な運動をしていました。私のコードはとてもシンプルです。

app.js：

var app = angular.module('readingList', []); 

    app.controller('BooksController', function($scope){ 

    $scope.books = books; 
    $scope.genres = genres; 

    }) 
    app.directive('bookGenres', function(){ 
    return { 
     restrict: 'E', 
     templateURL: 'partials/book-genres.html' 
    }; 
    }); 

    var books = [{ 
    title: 'ABCD', 
    author: 'E. Fgh', 
    isbn: '123414312341234', 
    review: 'Hello world', 
    rating: 4, 
    genres: { 
    'non-fiction': true, fantasy: false 
    } 
}]; 

var genres = ["foo1","bar2","foo2","bar3"]; 

} app.html：

<div class="row" ng-controller="BooksController"> 
    <button class="btn btn-default">Create Review</button> 

    <hr /> 
    <hr /> 
    <ul class="list-unstyled col-sm-8" > 
    <li class="book row" ng-repeat="book in books"> 
    <aside class="col-sm-3"> 
     <a href="http://www.amazon.com/gp/product/{{book.isbn}}"> 
     <img ng-src="http://images.amazon.com/images/P/{{book.isbn}}.01.ZTZZZZZZ.jpg" alt="" class="full"/> 
     </a> 
     <p class="goodRating rating">{{book.rating}}/5</p> 
    </aside> 

    <div class="col-sm-9 col-md-8"> 
     <h3> 
     <a href="http://rads.stackoverflow.com/amzn/click/0553593714"> 
      {{book.title}}  
     </a> 
     </h3> 
     <cite class="text-muted">{{book.author}}</cite> 

     <p>{{book.review}}</p> 

     <!-- Put Genre Here --> 
     <book-genres></book-genres> 

     <ul class="list-unstyled"> 

     <li ng-repeat="(genre, state) in book.genres"> 
      <span class="label label-primary" ng-show="state === true"> 
      {{genre}} 
      </span> 
     </li> 
     </ul> 
     </div> 
    </li> 
    </ul> 
</div> 

ブックgenres.html：

<ul class="list-unstyled"> 

    <li ng-repeat="(genre, state) in book.genres"> 
    <span class="label label-primary" ng-show="state === true"> 
     {{genre}} 
    </span> 
    </li> 
</ul> 

私のbook-genresディレクティブ以外は、すべてがビューでレンダリングされます。理由のために、それは動作しません。私はその文書をチェックした。私は他の同様の例と何も確認しなかった。私がこの指令を働かせることができなければ、画像のような他のコンポーネントをレンダリングすることが問題になるでしょう。私はまた、パーシャルビューのパスもチェックしました。

Answer 1

ここには2つの可能性があります。あなたのコントローラに$scopeを注入することを確認する必要があります：あなたのng-repeatに表示するアイテムを持っていないので、

app.controller('BooksController', ['$scope', function($scope) { 
    // do stuff 
}]); 

book.genres

は、どこにも定義されていません。

templateURLも正しくありません。templateUrlです。