Question

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

            <!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}}位于行内容div下，位于容器

下

Answer 1

您忘记在controllerAs指令上使用ng-controller模式。在那里创建别名，以便在视图中公开所有控制器上下文（this）。

ng-controller="dishDetailController as vm"

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

{{vm.dish.name}}

Answer 2

只需替换为：

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}}，这称为插值绑定。

我希望{h。dish.name}}显示在html页面中。

2 个答案: