$ scopeを使う - 角Js

Question

$ scopeの意味を学びました。今から今では自分のコードで使っていきます。しかし、jsonオブジェクトを読み込もうとすると、ブラウザに何も表示されません。コードはリンクに表示されています。

https://jsfiddle.net/jgou7j0p/

<div class="container"> 
    <div class="row row-content" ng-controller="DishDetailController"> 
     <div class="col-xs-12"> 
      <div class="media"> 
       <div class="media-left media-middle"> 
       <img ng-src={{dish.image}} class="media-object img-thumbnail"> 
       </div> 
       <div class="media-body"> 
        <div class="media-heading"> 
        <h2>{{dish.name}} 
        <span class="label label-danger label-xs"> {{dish.label}}</span> 
        <span class="badge"> {{dish.price | currency}}</span> 
        </h2> 
        <p>{{dish.description}}</p> 
        </div>  
       </div>  
      </div> 
     </div> 
     <div class="col-xs-9 col-xs-offset-1"> 
      <div class = "row"> 
      <div class = "col-xs-6"> 
       <h3>Customer Comments</h3> 
      </div> 
      <div class = "col-xs-6" style="margin-top: 20px;"> 
       <form class="form-inline" role="form"> 
       <div class="form-group"> 
        <label class="control-label">Sort by:</label> 
        <input type="text" class="form-control" ng-model="sorting"> 
       </div> 
       </form> 
      </div> 
      </div> 
      <div class="row"> 
       <div class="col-xs-12"> 
        <blockquote ng-repeat="comment in dish.comments | orderBy: sorting"> 
        <p>{{comment.rating}} Stars</p> 
        <p>{{comment.comment}}</p> 
        <footer>{{comment.author}}, {{comment.date | date:'MMM. dd, yyyy'}}</footer> 
        </blockquote> 
       </div> 
      </div> 
     </div> 
    </div> 

</div> 

とJSコード。

<script> 

    angular.module('confusionApp',[]) 

      .controller('DishDetailController',['$scope', function($scope) { 

      $scope.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; 
      $scope.sorting = ''; 

     }]); 

何が間違っている可能性がありますか？ありがとう、

Theo。

Answer 1

に割り当てるだろうと思い、この行$scope.dish = dish;を削除しますか？それがあなたの問題です。

最終的に$scope.dish = dishを削除してください。

Hereは、説明するためのフィドルです。

@Makotoによる上記のコメントで適切に言及されているように、Angularを学習している場合は、controller as syntaxの表記を使用することもできます。 Lookとthis very good postを参照してください。がんばろう！

Answer 2

その後、私はあなたが$scope.dishにし、オブジェクト設定されているが、その後、あなたが$scope.dish = dishを行うことが...

を仕事とトップ<div class="container" ng-app="confusionApp">