Использование $ scope - Angular 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 = ''; 

     }]); 

Любые идеи, что может быть неправильным?

Thanks,

Theo.

Answer 1

Вы устанавливаете $scope.dish к и объект, но затем вы делаете $scope.dish = dish? Это твоя проблема.

Удалить окончательный $scope.dish = dish, и вы должны быть хорошими.

Here - это скрипка для иллюстрации.

Как правильно сказано в комментарии выше, @Makoto, если вы изучаете Угловое, вы можете также использовать нотацию controller as syntax. Посмотрите и this very good post, чтобы узнать больше об этом. Удачи!

Answer 2

удалить эту строку $scope.dish = dish; тогда я думаю, что это будет работать ..

и назначить на верхней <div class="container" ng-app="confusionApp">