JavaScript - 角度アプリが動作しない

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' 
    }; 

（ⅱ）あなたは構文としてコントローラを使用するので、

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

としてそれを変更する必要があります（ⅲ）また<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>

としてあなたの表現を変更