AngularJS不显示数据

时间:2016-04-08 11:53:49

标签: html angularjs data-binding

我是框架中的绝对初学者,特别是棱角分明的。 请给我一个提示,为什么括号中的值不会显示在视图中。我正在为AngularJS和Javascript寻找建设性的批评,而不是因为我作为计算机科学家的技能。这是Coursera" Full stack web development"的第1部分。课程。这是代码:

            <html lang="en" ng-app="confusionApp">
            <body>
                <div class="container">
                    <div class="row row-content" ng-controller="dishDetailController as dishCtrl">
                        <div class="col-xs-12">
                            <div class="media">
                                <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>
                                </div>
                            </div>
                        </div>
                        <div class="col-xs-9 col-xs-offset-1">
                            <p>Put the comments here</p>
                        </div>
                    </div>
                </div>
                <script src="../bower_components/angular/angular.min.js"></script>
                <script>
                var app = angular.module('confusionApp', []);

                app.controller('dishDetailController', function() {

                    var 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.',                           
                    };

                    this.dish = dish;

                });
                </script>
            </body>
            </html>

2 个答案:

答案 0 :(得分:0)

当使用控制器时 - 因此你应该在数据之前添加dishCtrl  。像这样

try
{
    callA();
    try
    {
        callB();
    }
    catch 
    {
        Debug.Log("callB raised exception");
    }
}
catch
{
    Debug.Log("callA raised exception and callB was not executed");
}

 {{dishCtrl.dish.name}}
 var app = angular.module('confusionApp', []);

                app.controller('dishDetailController', function() {

                    var 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.',                           
                    };

                    this.dish = dish;

                });
             

答案 1 :(得分:0)

通过将控制器中的this.dish = dish更改为$scope.dish = dish来尝试avoiding scope soup

更好的解决方案是使用controllerAs,例如dishCtrl,如下{{dishCtrl.dish.description}}