AngularJS不顯示數據

我是一個絕對的框架初學者，特別是角度。請給我一個提示，爲什麼括號中的值不顯示在視圖中。我正在尋找AngularJS和Javascript的建設性批評，而不是我作爲計算機科學家的技能。這是Coursera「Full stack web development」課程的第一部分。這裏是代碼：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

我不認爲該課程的作者希望我使用示波器，因爲它在下個星期。第二個我想 –

當使用控制器，因此，您應該在您的數據之前添加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-作爲你在你的項目中使用。 –

通過在控制器改變this.dish = dish到$scope.dish = dish嘗試avoiding scope soup。

更好的解決方案是使用controllerAs，在你的情況下爲dishCtrl，如下{{dishCtrl.dish.description}}。

來源

2016-04-08 12:09:07 Kasper

AngularJS不顯示數據

回答

相關問題