Question

一周前我开始学习AngularJS，我试图让事情变得非常简单但没有成功。我找不到错误。目前，ui-view没有显示任何数据。但是，与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>

Answer 1

像这样更改你的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>

看看它是否有效，

以角度link

结帐Controller Out语法

为了使用this，您必须将控制器作为声明

Answer 2

更新控制器以使用范围，运行示例https://jsbin.com/dodaduwowe/edit?html,output

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

        $scope.dish = dish;

    });

Answer 3

如果您在控制器中使用Expected type: m [b] Actual type: (a -> [b0]) -> [[b0]] ... Possible cause: ‘myforM’ is applied to too many arguments，则必须在控制器名称中使用this，如下所示

as

使用像这样的控制器实例访问

ng-controller="dishDetailController as ctrl"

如果您不想在控制器中使用<h2 class="media-heading">{{ctrl.dish.name}}</h2>，请使用as

附加数据

首先注入$scope

$scope

然后附上app.controller('dishDetailController', function($scope) {

$scope

Answer 4

试试这个

<!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>

AngularJS：视图不显示

4 个答案: