我想让{{dish.name}}显示在html页面中。

我是angularjs的新手。我遇到了一个问题。我希望{{dish.name}}在html页面中显示。我插入了它，但不知道为什么它没有被显示。这是我的代码。我想让{{dish.name}}显示在html页面中。

  <!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"> 
       <!-- The above 3 meta tags *must* come first in the head; any other head 
        content must come *after* these tags --> 
       <title>Ristorante Con Fusion: Menu</title> 
       <!-- Bootstrap --> 
       <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"> 

       <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 
       <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
       <!--[if lt IE 9]> 
       <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> 
       <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
       <![endif]--> 
      </head> 

      <body> 

      <div class="container"> 
       <div class="row row-content"> 
        <div class="col-xs-12" ng-controller="dishDetailController"> 
         <h2 class="media-heading"> 
          {{dish.name}} <!-- I want this to be displayed --> 
         </h2> 
        </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>

的{{dish.name}}位于其下位于下容器

来源

2017-04-02 Shameem Fairooz

你忘了在ng-controller指令中使用controllerAs模式行内容股利。在那里制作别名，以便所有的控制器上下文（this）都会在视图中公开。

ng-controller="dishDetailController as vm"

然后执行从控制器上下文访问任何对象/方法之前使用vm。

{{vm.dish.name}}

来源

2017-04-02 11:13:34

只需更换有：

app.controller('dishDetailController', 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: [ 
          {

基本上有两种方式来实现这一目标：

1-使用ng-controller="fooController as bar"让你的控制器的一个别名，然后在您的标记您使用的别名（不推荐）

2-一个更清洁的实施方法是将$scope服务注入您的控制器并使用$scope.abc = {name:'Test'}，并且在标记中{{abc.name}}被称为插值绑定。

来源

2017-04-02 13:43:52

我想让{{dish.name}}显示在html页面中。

回答

相关问题