AngularJS 不显示数据答案

【问题标题】：AngularJS doesn't display dataAngularJS 不显示数据
【发布时间】：2016-04-08 11:53:48
【问题描述】：

我是框架的绝对初学者，尤其是角度。请给我一个提示，为什么括号中的值没有显示在视图中。我正在寻找对 AngularJS 和 Javascript 的建设性批评，而不是我作为计算机科学家的技能。这是 Coursera“全栈 Web 开发”课程的第 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>

【问题讨论】：

您可以将this.dish = 更改为$scope.dish = 或使用{{dishCtrl.dish.foo}}。
我不认为该课程的作者希望我使用示波器，因为它是在下周。我猜是第二个

标签： html angularjs data-binding

【解决方案1】：

当使用控制器时，你应该在你的数据之前添加dishCtrl .像这样

 {{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;

                });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

                <div ng-app="confusionApp" 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={{dishCtrl.dish.image}} alt="Uthappizza">
                                    </a>
                                </div>
                                <div class="media-body">
                                    <h2 class="media-heading">{{dishCtrl.dish.name}}
                                  <span class="label label-danger">{{dishCtrl.dish.label}}</span>
                                     <span class="badge">{{dishCtrl.dish.price | currency}}</span>
                                  </h2>
                                    <p>{{dishCtrl.dish.description}}</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-xs-9 col-xs-offset-1">
                            <p>Put the comments here</p>
                        </div>
                    </div>
                </div>

【讨论】：

感谢您的帮助，我仍然误解了很多 Angular 基础知识
最好使用conroller——就像你在项目中使用的那样。

【解决方案2】：

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

更好的解决方案是使用controllerAs，在你的情况下dishCtrl，如下{{dishCtrl.dish.description}}。

【讨论】：