angular.jg ngコントローラが動作していませんか？

メディアオブジェクトから何も表示されないようです。angular.jg ngコントローラが動作していませんか？

dishオブジェクトが機能していません。

あなたがここに Controller as構文を使用する必要が

<!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を注入することは必ずしも必要ではなく、多くの開発者は$ scope soupよりも "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

スパンタグの外側にある{{dish.price}} のように {{dish.price}} – Arun

angular.jg ngコントローラが動作していませんか？

答えて

関連する問題