$ scope 사용 - 각도 J

Question

$ scope의 의미를 알았으므로 지금부터는 코드에서 사용하려고합니다. 그러나 json 객체를 읽을 때 브라우저에 아무 것도 표시되지 않습니다. 코드는 링크에 표시됩니다.

<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> 

https://jsfiddle.net/jgou7j0p/

와 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 = ''; 

     }]); 

어떤 아이디어가 잘못되었을 수 있습니까?

감사합니다,

테오.

Answer 1

당신은에 $scope.dish 및 개체를 설정하고 있지만 다음 $scope.dish = dish을에서

및 지정? 그것이 당신의 문제입니다.

최종 $scope.dish = dish을 제거하면 좋을 것입니다.

Here은 설명 할 바이올린입니다.

@Makoto가 위의 설명에서 적절히 언급 한 것처럼, Angular를 배우는 경우 controller as syntax 표기법을 사용해보십시오. Look and this very good post에 대해 자세히 알아보십시오. 행운을 빕니다!

Answer 2

제거 $scope.dish = dish; 다음 나는 그것이 작동 생각이 라인 .. 상단 <div class="container" ng-app="confusionApp">