javascript - 从 AngularJs 中的 Controller 中读取任何内容

Question

我被赋予了这个任务。基本上有一个名为 DishDetailedController 的 Controller ，它有一个名为 dish 的对象。还有一个名为 DishCommentContoller 的嵌套 Controller ，用户可以在其中通过表单发送评论。因此第一个任务是读取 DishDetailedController 的所有对象并将它们显示在浏览器中。稍后我会在另一个 div 中显示评论数组对象。我之前做过类似的事情，但我不知道现在发生了什么。

https://jsfiddle.net/m8nwnc8a/4/

引导代码

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

AngularJs 代码

'use strict';

 angular.module('confusionApp', [])


    .controller('DishDetailController', ['$scope', 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;

    }])

    .controller('DishCommentController', ['$scope', function($scope) {

        //Step 1: Create a JavaScript object to hold the comment from the form

        $scope.submitComment = function () {

            //Step 2: This is how you record the date
            "The date property of your JavaScript object holding the comment" = new Date().toISOString();

            // Step 3: Push your comment into the dish's comment array
            $scope.dish.comments.push("Your JavaScript Object holding the comment");

            //Step 4: reset your form to pristine

            //Step 5: reset your JavaScript object that holds your comment
        }
    }]);

有什么想法吗？

Answer 1

你忘记包含很多东西，来自 ng-app。 ng-controller 到脚本文件。

这应该有效: https://jsfiddle.net/m8nwnc8a/28/