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>

图书-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。

角度指令Bug与视图

1 个答案: