angular.jg ng 控制器不工作？

Question

似乎无法显示媒体对象的任何内容！

dish 对象不工作。

<!DOCTYPE html>
    <html lang="en" ng-app="confusionApp">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Ristorante Con Fusion: Menu</title>
        <link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
        <link href="../bower_components/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet">
        <link href="../bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet">
        <link href="styles/bootstrap-social.css" rel="stylesheet">
        <link href="styles/mystyles.css" rel="stylesheet">
    </head>
    <body>
        <div class="container" ng-controller="dishDetailController">
            <div class="row row-content">
                <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.',
                    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"
                         }
                    ]
                };
                  this.dish = dish;
            });
        </script>
    </body>
    </html>

Answer 1

这里需要使用Controller as语法,

 <div class="container" ng-controller="dishDetailController as dish">

演示版

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.',
                    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"
                         }
                    ]
                };
                  this.dish = dish;
            });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="container" ng-app="confusionApp" ng-controller="dishDetailController as dish">
 <div class="row row-content">
  <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.dish.image}} alt="Uthappizza"></a>
    </div>
    <div class="media-body">
     <h2 class="media-heading">{{dish.dish.name}}
      <span class="label label-danger">{{dish.dish.label}}</span>
      <span class="badge"> {{dish.dish.price | currency}}</span></h2>
     <p>{{dish.dish.description}}</p>
    </div>
   </div>
  </div>
  <div class="col-xs-9 col-xs-offset-1">
   <p>Put the comments here</p>
  </div>
 </div>
</div>

Answer 2

错误是您没有为 dish 附加范围变量。不要使用 this.dish，而是使用 $scope.dish。我已经在下面更新了你的控制器功能，它应该可以工作。

app.controller('dishDetailController', function($scope) {
                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.',
                    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"
                         }
                    ]
                };
                $scope.dish = dish;
            });

Answer 3

尝试在 $scope 而不是 this 上设置菜品对象。

$scope.dish = dish;

Answer 4

您需要将 $scope 注入函数并将您的 var 对象分配给 $scope。试试下面给出的代码。

    <!DOCTYPE html>
        <html lang="en" ng-app="confusionApp">
        <head>
            <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <title>Ristorante Con Fusion: Menu</title>
              <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

        </head>
        <body>
            <div class="container" ng-controller="dishDetailController">
                <div class="row row-content">
                    <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>
                var app = angular.module('confusionApp',[]);
                app.controller('dishDetailController', function($scope) {
                    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.',
                        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"
                             }
                        ]
                    };
                     $scope.dish = dish;
                });
            </script>
        </body>
        </html>

angular.jg ng 控制器不工作？

angular.jg ng controller not working?

javascript

angularjs

ng-controller