带视图的角度指令错误

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="https://rads.stackoverflow.com/amzn/click/com/0553593714" rel="nofollow noreferrer">
           {{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>

book-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

这里有两种可能。 您需要确保将$scope注入控制器：

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

book.genres没有在任何地方定义，因此您的ng-repeat没有项目可显示。

templateURL也不正确，应该为templateUrl 。