Angular Directive Bug mit Ansicht

Question

Ich machte eine sehr schnelle Übung mit eckigen Anweisungen. Mein Code ist sehr einfach.

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> 

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

Alles rendert mit der Ansicht außer meiner Buchgenres-Richtlinie. Aus gutem Grund funktioniert es nicht. Ich habe die Dokumentation überprüft. Ich habe andere ähnliche Beispiele und nichts überprüft. Wenn ich diese Anweisung nicht ausführen kann, wird das Rendern der anderen Komponenten wie dem Bild ein Problem sein. Ich habe auch den Pfad der Teilansichten überprüft.

Answer 1

Hier gibt es ein paar Möglichkeiten. Sie müssen sicher sein, $scope in Ihrem Controller zu injizieren:

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

book.genres nicht überall definiert ist, so dass Ihr ng-repeat keine Elemente hat angezeigt werden soll.

templateURL ist auch falsch, sollte es templateUrl sein.