JavaScript - Angular 应用程序不工作

Question

我是 Javascript 的新手，我无法让我的单一 Angular 应用程序工作。我已经包括了 Angular Controller 和模块，以及所有需要的依赖项，但我在前 View 中得到的只是 img alt 属性。

这是我的代码。

        <div class="col-xs-12">
            <div class="media"> 
                <div class="media-left media-middle">
                    <a href="#"></a>
                    <img class="media-object img-thumbnail" ng-src="{{dish.image}}" alt="Uthapizza">
                 </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>

<script src="../bower_components/angular/angular.min.js"></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:'xyz
                        };
        this.dish = dish;

    });


</script>

Answer 1

您的代码几乎没有问题

(i)您的对象无效，将其更改为，

 var dish={
             name:'Uthapizza',
             image: 'images/uthapizza.png',
             category: 'mains', 
             label:'Hot',
             price:'4.99',
             description:'xyz'
  };

(ii) 您应该使用 controller 作为 Syntax，因此将其更改为

 <div ng-app="confusionApp" ng-controller="dishDetailController as dish" class="col-xs-12">

(iii) 同时将您的表达式更改为 <p>{{dish.dish.description}}</p>

演示

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:'xyz'
        };
    this.dish = dish;
 });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="confusionApp" ng-controller="dishDetailController as dish" class="col-xs-12">
    <div class="media">
        <div class="media-left media-middle">
            <a href="#"></a>
            {{dish.dish}}
            <img class="media-object img-thumbnail" ng-src="{{dish.dish.image}}" alt="Uthapizza">
        </div>
        <div class="media-body">
            <h2 class="media-heading">{{dish.dish.name}}</h2>
                <span class="label label-danger">{{dish.label}}</span>
                <span class="badge">{{dish.dish.price}}</span>
             
            <p>{{dish.dish.description}}</p>
        </div>
    </div>
</div>