AngularJSはデータを表示しません

私はフレームワーク、特に角度の絶対的な初心者です。括弧内の値がビューに表示されない理由を教えてください。 AngularJSとJavascriptの建設的な批判を探しています。コンピュータ科学者としての私のスキルではありません。これは、Coursera "Full stack web development"コースの第1部です。ここでは、コードは次のようになります。AngularJSはデータを表示しません

  <html lang="en" ng-app="confusionApp"> 
      <body> 
       <div class="container"> 
        <div class="row row-content" ng-controller="dishDetailController as dishCtrl"> 
         <div class="col-xs-12"> 
          <div class="media"> 
           <div class="media-left media-middle"> 
            <a href="#"> 
             <img class="media-object img-thumbnail" ng-src={{dish.image}} alt="Uthappizza"> 
            </a> 
           </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> 
         <div class="col-xs-9 col-xs-offset-1"> 
          <p>Put the comments here</p> 
         </div> 
        </div> 
       </div> 
       <script src="../bower_components/angular/angular.min.js"></script> 
       <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: '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.',       
        }; 

        this.dish = dish; 

       }); 
       </script> 
      </body> 
      </html>

出典

2016-04-08 Taras Yaremkiv

'this.dish ='を '$ scope.dish ='に変更するか、 '{{dishCtrl.dish.foo}} 'を使うことができます。 – alper

私はコースの作者が来週にスコープを使用したかったと思っていません。 2番目の私は、 –

使用コントローラは-ように、あなたのデータ前dishCtrlを追加する必要があるとき。この

{{dishCtrl.dish.name}}

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: '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.',       
 
        }; 
 

 
        this.dish = dish; 
 

 
       });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
       <div ng-app="confusionApp" class="container"> 
 
        <div class="row row-content" ng-controller="dishDetailController as dishCtrl"> 
 
         <div class="col-xs-12"> 
 
          <div class="media"> 
 
           <div class="media-left media-middle"> 
 
            <a href="#"> 
 
             <img class="media-object img-thumbnail" ng-src={{dishCtrl.dish.image}} alt="Uthappizza"> 
 
            </a> 
 
           </div> 
 
           <div class="media-body"> 
 
            <h2 class="media-heading">{{dishCtrl.dish.name}} 
 
            <span class="label label-danger">{{dishCtrl.dish.label}}</span> 
 
            <span class="badge">{{dishCtrl.dish.price | currency}}</span> 
 
            </h2> 
 
            <p>{{dishCtrl.dish.description}}</p> 
 
           </div> 
 
          </div> 
 
         </div> 
 
         <div class="col-xs-9 col-xs-offset-1"> 
 
          <p>Put the comments here</p> 
 
         </div> 
 
        </div> 
 
       </div>

出典

2016-04-08 12:00:00

が助けてくれてありがとうと思っています。私はまだ多くのことを誤解しています。 –

あなたのプロジェクトで使うように、conrollerを使うのが良いです。 –

ようなあなたのコントローラに$scope.dish = dishにthis.dish = dishを変更することにより、avoiding scope soupを試してみてください。

より良い解決策は、コントローラの場合、dishCtrlの場合、{{dishCtrl.dish.description}}のように使用することです。

出典

2016-04-08 12:09:07 Kasper

AngularJSはデータを表示しません

答えて

関連する問題