Question

我还是比较陌生，但是我在输入book.review和book.stars时遇到问题。谁能指出什么是错的？即使我在ng-repeat中添加了类似于单词的内容，例如

测试词

测试字永远不会在屏幕上呈现。

的index.html

<!DOCTYPE html>
<html ng-app="DirectivesTest">
    <head>
        <title>Directives Practice</title>
        <link rel="stylesheet" href="app.css">
        <script src="bower_components/angular/angular.js"></script>
        <script src="app.js"></script>
    </head>
    <body>
        <div id="header">
            The #1 Book Review Site With Only 6 Books!
        </div>
        <div class="container">
            <div class="row">
                <div class="col-md-4">
                    <div ng-controller="BookController">
                        <div class="test" ng-repeat="book in books">
                            {{book.review}}

                            {{book.stars}}
                        </div>
                    </div>      
                </div>
            </div>
        </div>
        <book-reviews></book-reviews>
    </body>
</html>

app.js

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

app.directive('bookReviews', function(){
    return {
        restrict: 'E',
        templateUrl: 'book-reviews.html',
        controller: 'BookController' //controller function
    }; //end return
}) //end directive

app.controller("BookController", [ '$scope', function($scope){
    $scope.books = [{
        $scope.title: "Harry Potter and the Sorcerer's Stone",
        $scope.description: "Harry Potter has no idea how famoushe  is. That's because he's being raised by his miserable aunt and uncle who are terrified Harry will learn that he's really a wizard, just as his parents were. But everything changes when Harry is summoned to attend an infamous school for wizards, and he begins to discover some clues about his illustrious birthright. From the surprising way he is greeted by a lovable giant, to the unique curriculum and colorful faculty at his unusual school, Harry finds himself drawn deep inside a mystical world he never knew existed and closer to his own noble destiny.",
        $scope.review: [
            {
                $scope.stars: 5,
                $scope.body: "I love this book!",
                $scope.author: "JoeJohnson@gmail.com",
                $scope.createdOn: 42434343
            },
            {
                $scope.stars: 4,
                $scope.body: "It was pretty good. A little long though",
                $scope.author: "PaulPaulson@gmail.com",
                $scope.createdOn: 42434343  
            },
            {
                $scope.stars: 5,
                $scope.body: "It's the best book I've ever read.",
                $scope.author: "JimJohnson@gmail.com",
                $scope.reatedOn: 454535543
            }
        ]
    }];

}])

Answer 1

您必须使用$ scope来提供控制器和视图之间的绑定。

在你的情况下：

...
app.controller("BookController", function($scope){
$scope.books = [{
...

Answer 2

这应该适合你：

var app = angular.module('MyApp', []);

app.controller("BookController", function($scope){
$scope.books = [{
  title: "Harry Potter and the Sorcerer's Stone",
  description: "Harry Potter has no idea how famoushe  is. That's because he's being raised by his miserable aunt and uncle who are terrified Harry will learn that he's really a wizard, just as his parents were. But everything changes when Harry is summoned to attend an infamous school for wizards, and he begins to discover some clues about his illustrious birthright. From the surprising way he is greeted by a lovable giant, to the unique curriculum and colorful faculty at his unusual school, Harry finds himself drawn deep inside a mystical world he never knew existed and closer to his own noble destiny.",
    review: [{
        stars: 5,
        body: "I love this book!",
        author: "JoeJohnson@gmail.com",
        createdOn: 42434343
    },
    {
        stars: 4,
        body: "It was pretty good. A little long though",
        author: "PaulPaulson@gmail.com",
        createdOn: 42434343 
    },
    {
        stars: 5,
        body: "It's the best book I've ever read.",
        author: "JimJohnson@gmail.com",
        createdOn: 454535543
    }]
}];
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>

<div ng-controller="BookController" ng-cloak="" ng-app="MyApp">
    <div class="test" ng-repeat="book in books">
        <h4>{{book.title}}</h4>
        {{book.description}}
        <div ng-repeat="review in book.review">
            <hr/>
            Stars: {{review.stars}}, {{review.body}}
        </div>
    </div>
</div>

Answer 3

如上所述，您需要在$ scope上放书。此外，您可能希望在第一个内部设置另一个ng-repeat用于评论。

<div ng-repeat="review in book.review">

然后打印每个评论使用的星星

{{review.stars}}

关于您的上次编辑，只需要在范围内预订。不是对象内的变量。

    $scope.books = [{
        title: "Harry Potter and the Sorcerer's Stone",
        description: "Harry Potter has no idea how famoushe  is. That's because he's being raised by his miserable aunt and uncle who are terrified Harry will learn that he's really a wizard, just as his parents were. But everything changes when Harry is summoned to attend an infamous school for wizards, and he begins to discover some clues about his illustrious birthright. From the surprising way he is greeted by a lovable giant, to the unique curriculum and colorful faculty at his unusual school, Harry finds himself drawn deep inside a mystical world he never knew existed and closer to his own noble destiny.",

         review: [{
            stars: 5,
            body: "I love this book!",
            author: "JoeJohnson@gmail.com",
            createdOn: 42434343
},
{
    stars: 4,
    body: "It was pretty good. A little long though",
    author: "PaulPaulson@gmail.com",
    createdOn: 42434343  
},
{
    stars: 5,
    body: "It's the best book I've ever read.",
    author: "JimJohnson@gmail.com",
    reatedOn: 454535543

}
]
        }];

ng-repeat不输出数组结果

3 个答案: