Javascript AngularJS:视图未显示_Javascript_Html_Angularjs

Javascript AngularJS:视图未显示

javascript html angularjs

Javascript AngularJS:视图未显示,javascript,html,angularjs,Javascript,Html,Angularjs,一周前我开始学习AngularJS，我正在尝试做一些非常简单但没有成功的事情。我找不到错误。当前，ui视图未显示任何数据。但是，与borwser检查员核实，似乎有任何问题。请帮忙，谢谢 <!DOCTYPE html> <html ng-app="confusionApp" lang="en"><head> <body> <div class="container"> <div clas

一周前我开始学习AngularJS，我正在尝试做一些非常简单但没有成功的事情。我找不到错误。当前，ui视图未显示任何数据。但是，与borwser检查员核实，似乎有任何问题。请帮忙，谢谢

    <!DOCTYPE html>
    <html ng-app="confusionApp" lang="en"><head>


    <body>

    <div class="container">
    <div class="row row-content" ng-controller="dishDetailController">
        <div class="col-xs-12">
             <div class="media">
                  <h2 class="media-heading">{{dish.name}}</h2>


            <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: []
                };

        this.dish = dish;

    });

</script>


{{dish.name}
把评论放在这里
var-app=angular.module（'confusionApp'，[]）；
app.controller（'dishdailcontroller'，function（）{
真空皿={
名称：'Uthapizza'，
图片：“images/uthapizza.png”，
类别：'干线'，
标签：'热'，
价格：'4.99'，
描述：“一种独特的印度乌萨帕姆（煎饼）和意大利比萨饼组合，顶部有樱桃橄榄、成熟的葡萄藤樱桃西红柿、维达利亚洋葱、甘特辣椒和水牛肉饼。”，
评论：[]
};
这道菜=这道菜；
});

像这样更改html

    <div class="row row-content" ng-controller="dishDetailController as dishDetail">
    <div class="col-xs-12">
         <div class="media">
              <h2 class="media-heading">{{dishDetail.dish.name}}</h2>


{{dishdail.dish.name}

看看它是否有效

在angular中作为语法签出控制器

为了使用

此

，您必须需要控制器作为声明

更新控制器以使用范围，运行示例

如果在控制器中使用

this

，则必须在控制器名称中使用

as

，如下所示

ng-controller="dishDetailController as ctrl"

<h2 class="media-heading">{{ctrl.dish.name}}</h2>

并使用如下控制器实例进行访问

ng-controller="dishDetailController as ctrl"

<h2 class="media-heading">{{ctrl.dish.name}}</h2>

然后附加

$scope

app.controller('dishDetailController', function($scope) {

$scope.dish = dish;

试试这个

<!DOCTYPE html>
    <html ng-app="confusionApp" lang="en"><head>
    <body>

    <div class="container">
    <div class="row row-content" ng-controller="dishDetailController">
        <div class="col-xs-12">
             <div class="media">
                  <h2 class="media-heading">{{dish.name}}</h2>
            <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($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: []
                };



    });

</script>


{{dish.name}
把评论放在这里
var-app=angular.module（'confusionApp'，[]）；
应用程序控制器（'dishDetailController'，函数（$scope）{
$scope.dish={
名称：'Uthapizza'，
图片：“images/uthapizza.png”，
类别：'干线'，
标签：'热'，
价格：'4.99'，
描述：“一种独特的印度乌萨帕姆（煎饼）和意大利比萨饼组合，顶部有樱桃橄榄、成熟的葡萄藤樱桃西红柿、维达利亚洋葱、甘特辣椒和水牛肉饼。”，
评论：[]
};
});

这几天我一直在努力解决这个问题。谢谢！