JavaScript - Angular应用程序不能正常工作

Question

我是JavaScript新手，无法让我的单角应用程序工作。我已经包含了角度控制器和模块，以及所需的所有依赖关系，但我在前视图中获得的是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）您应该使用控制器的语法，所以改变它作为

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

（III）也改变你的表情为<p>{{dish.dish.description}}</p>

DEMO

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>