angular.jg ng控制器不工作？

似乎無法顯示媒體對象中的任何內容！angular.jg ng控制器不工作？

dish對象不工作。

<!DOCTYPE html> 
    <html lang="en" ng-app="confusionApp"> 
    <head> 
     <meta charset="utf-8"> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <title>Ristorante Con Fusion: Menu</title> 
     <link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"> 
     <link href="../bower_components/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet"> 
     <link href="../bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet"> 
     <link href="styles/bootstrap-social.css" rel="stylesheet"> 
     <link href="styles/mystyles.css" rel="stylesheet"> 
    </head> 
    <body> 
     <div class="container" ng-controller="dishDetailController"> 
      <div class="row row-content"> 
       <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.', 
        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" 
         } 
        ] 
       }; 
        this.dish = dish; 
      }); 
     </script> 
    </body> 
    </html>

來源

2017-06-18 Kenneth Wong

你得到的錯誤是什麼？ – Gautam

@Gautam我沒有什麼顯示。名稱想象標籤和描述假設顯示 –

檢查我的答案在下面。這應該工作 – Gautam

-2

錯誤是你沒有附加一個範圍變量與菜。而不是使用this.dish，使它$ scope.dish。我已經更新了你的控制器功能，應該在其下工作。

app.controller('dishDetailController', function($scope) { 
       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.', 
        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; 
      });

來源

2017-06-18 03:51:40 Gautam

注入$範圍當然沒有必要，許多開發人員更喜歡$ scope soup的「controller as」語法。 –

您需要使用Controller as語法這裏，

<div class="container" ng-controller="dishDetailController as dish">

DEMO

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.', 
 
        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" 
 
         } 
 
        ] 
 
       }; 
 
        this.dish = dish; 
 
      });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div class="container" ng-app="confusionApp" ng-controller="dishDetailController as dish"> 
 
\t <div class="row row-content"> 
 
\t \t <div class="col-xs-12"> 
 
\t \t \t <div class="media"> 
 
\t \t \t \t <div class="media-left media-middle"> 
 
\t \t \t \t \t <a href="#"><img class="media-object img-thumbnail" ng-src={{dish.dish.image}} alt="Uthappizza"></a> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="media-body"> 
 
\t \t \t \t \t <h2 class="media-heading">{{dish.dish.name}} 
 
\t \t \t \t \t \t <span class="label label-danger">{{dish.dish.label}}</span> 
 
\t \t \t \t \t \t <span class="badge"> {{dish.dish.price | currency}}</span></h2> 
 
\t \t \t \t \t <p>{{dish.dish.description}}</p> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t \t <div class="col-xs-9 col-xs-offset-1"> 
 
\t \t \t <p>Put the comments here</p> 
 
\t \t </div> 
 
\t </div> 
 
</div>

來源

2017-06-18 03:51:24 Sajeetharan

仍然不起作用... –

您是否檢查附帶的演示？ – Sajeetharan

它應該是上面代碼中的dish.dish.name等。 – Vivz

嘗試設置上$scope代替this菜對象。

$scope.dish = dish;

來源

2017-06-18 03:53:08 ookadoo

您需要將$ scope注入函數並將var對象賦值給$ scope。嘗試下面給出的代碼。

<!DOCTYPE html> 
     <html lang="en" ng-app="confusionApp"> 
     <head> 
      <meta charset="utf-8"> 
      <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <title>Ristorante Con Fusion: Menu</title> 
       <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 

     </head> 
     <body> 
      <div class="container" ng-controller="dishDetailController"> 
       <div class="row row-content"> 
        <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> 
       var app = angular.module('confusionApp',[]); 
       app.controller('dishDetailController', function($scope) { 
        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.', 
         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; 
       }); 
      </script> 
     </body> 
     </html>

來源

2017-06-18 12:23:02 Arun

同時給{span>標籤之外的{{dish.price}} ，如 {{dish.price}} – Arun

angular.jg ng控制器不工作？

回答

相關問題