angularjs $ scope not working

时间:2015-12-16 21:12:08

标签: javascript angularjs

经过几次教程视频和文档后,我的数据绑定似乎没有生效。我对这门语言比较陌生,所以有人可以向我解释我做错了什么吗? (我尝试使用$ scope实现,而不是作为我的控制器的别名)。我附上了我的HTML和我的javascript。

    <div class="container">
    <div class="row row-content" ng-controller="DishDetailController">
        <div class="col-xs-12">
           <div class="media-list">
                <div class="media-left media-middle">
                    <a href="#">
                    <img class="media-object img-thumbnail"
                     ng-src={{dish.image}} alt="Uthappizza">
                    </a>
                </div>
                <div class="media-body">
                    <h2 class="media-heading">{{dish.name}}
                     <span class="label label-danger">{{dish.label}}</span>
                     <span class="badge">{{dish.price | currency}}</span></h2>
                    <p>{{dish.description}}</p>
                    <br><br>
                    <p> <strong>Customer Comments</strong> &nbsp;&nbsp;&nbsp;&nbsp;  Sort by:
                       <input type="text" ng-model="userOrder" accept="" placeholder="Filter by" autofocus></p>
                    <span>{{dish}}</span>
                </div>
        </div>
        </div>
        <div class="col-xs-9 col-xs-offset-1">
             <div class="media-list" ng-repeat="comment in dish.comments | orderBy:userOrder">
                 <ul>
                <blockquote>
                  <p>{{comment.rating}} Stars</p>
                   <p>{{comment.comment}}</p>
                    <footer>By {{comment.author}} on {{comment.date | date:'mediumDate'}} </footer>
                </blockquote>
                </ul>
        </div>
    </div>

        .controller('DishDetailController', ['$scope', function($scope) {

        $scope.dish={
                      name:'Uthapizza',
                      image: 'images/uthapizza.png',
                      category: 'mains',
                      label:'Hot',
                      price:'4.99',
                      description:'A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.',
                       comments: [
                           {
                               rating:5,
                               comment:"Imagine all the eatables, living in conFusion!",
                               author:"John Lemon",
                               date:"2012-10-16T17:57:28.556094Z"
                           },
                           {
                               rating:4,
                               comment:"Sends anyone to heaven, I wish I could get my mother-in-law to eat it!",
                               author:"Paul McVites",
                               date:"2014-09-05T17:57:28.556094Z"
                           },
                           {
                               rating:3,
                               comment:"Eat it, just eat it!",
                               author:"Michael Jaikishan",
                               date:"2015-02-13T17:57:28.556094Z"
                           },
                           {
                               rating:4,
                               comment:"Ultimate, Reaching for the stars!",
                               author:"Ringo Starry",
                               date:"2013-12-02T17:57:28.556094Z"
                           },
                           {
                               rating:2,
                               comment:"It's your birthday, we're gonna party!",
                               author:"25 Cent",
                               date:"2011-12-02T17:57:28.556094Z"
                           }

                       ]
                };

    }])

1 个答案:

答案 0 :(得分:0)

您的对象在数组中,因此表达式需要以这种方式访问​​它们。

示例,访问comment数组中的第二个comments

<footer>By {{comment.author}} on {{comment.date | date:'mediumDate'}} </footer>

应该是:

<footer>By {{comments[1].comment.author}} on {{comments[1].comment.date | date:'mediumDate'}} </footer>

编辑:正如已经指出的那样,已经有一个转发器(我忽略了)。这个答案没有实际意义。