Could someone please tell me why my controller is not working?

Question

0.00/5 (No votes)

See more:

<!DOCTYPE html>
<!-- saved from url=(0321)https://d3c33hcgiwev3.cloudfront.net/_49c417f481d797cf78b2985d8bded22f_dishdetail.html?Expires=1488499200&Signature=YdPcXNwk78MqE59oA8~wzXXqVi2zXhqyQ7HtLVzD8tcJu9xbhpYOnf7As42ZLpbS1ftWJ7VT-p2Hhml8DLe~xNrTZgmM7NLCLmsy63IUYEkOg~DNOOY1XM-zarkYQeHXbTe7PYOH1EX3plxY0VwUwaaKCygnWmMm9HAX4L0AaD4_&Key-Pair-Id=APKAJLTNE6QMUY6HBC5A -->
<html lang="en" ng-app="confusionApp"><head><meta http-equiv="Content-Type" content="text/html; 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="./Ristorante Con Fusion_ Menu_files/bootstrap.min.css" rel="stylesheet">
    <link href="./Ristorante Con Fusion_ Menu_files/bootstrap-theme.min.css" rel="stylesheet">
    <link href="./Ristorante Con Fusion_ Menu_files/font-awesome.min.css" rel="stylesheet">
    <link href="./Ristorante Con Fusion_ Menu_files/bootstrap-social.css" rel="stylesheet">
    <link href="./Ristorante Con Fusion_ Menu_files/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" ng-app="confusionApp" ng-controller="dishDetailController">
            <div class="col-xs-12">
               <div class="media"  ng-repeat="dish in dishDetailController.dish>
			   <div class= "media left"> <img class="media object" ng-src={{dish.image}}>
			   </div>
			   <div class="media body">
			   <h4 class="media heading"> {{dish.name}}{{dish.category}}<span class="label label-danger">{{dish.label}}</span><span class="badge">{{dish.price}}</h4>
			   <p>{{dish.description}}</p>
			   </div>
			   </div>
            </div>
            <div class="col-xs-9 col-xs-offset-1">
                <p>Put the comments here</p>
            </div>
        </div>

    </div>

    <script src="./Ristorante Con Fusion_ Menu_files/angular.min.js.download"></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>

What I have tried:

It is an assessment example, I wrote to the forum but didn`t get answer yet. I cannot make the controller working and display my expressions. Thank you for helping.

Posted 2-Mar-17 5:36am

Member 13034044

Updated 2-Mar-17 7:11am

Add a Solution

Comments

Afzaal Ahmad Zeeshan 2-Mar-17 11:38am

It is unclear to tell why the controller does not work. As you are only showing the HTML content + no message telling us what is going wrong.

Member 13034044 2-Mar-17 12:24pm

Yes, thank You. Meanwhile I checked the console, it says this:

:hov

.cls

element.style {
}
user agent stylesheet
body {
display: block;
margin: 8px;
}
margin8
8border‒
‒padding‒
‒518 × 130.531‒
‒‒
‒8
8

Console

Preserve log

angular.min.js.download:1 Uncaught SyntaxError: Unexpected token <
Ristorante%20Con%20Fusion_%20Menu.html:49 Uncaught ReferenceError: angular is not defined
at Ristorante%20Con%20Fusion_%20Menu.html:49

Looks like there is a problem calling the subfiles, but the school set up the directories and I did exactly how they required...
At least Im one step closer to the solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Bryian Tan · Accepted Answer · 2017-03-02T07:11:00

Solution 1

Look like there are couple of issues with the code presented here.

1. missing angularjs reference (maybe angular.min.js.download should be angular.min.js?)
2. something not seem right on the controller. I changed it to use scope and wrap the [] to the array
3. ng-repeat seem odd, it should be dish in dish instead of dish in dishDetailController.dish

Anyway, Here is the corrected version I think it should look like

Plunker - Pizza[^]

Posted 2-Mar-17 7:11am

Bryian Tan

Updated 2-Mar-17 7:12am

v2

Comments

Member 13034044 2-Mar-17 14:14pm

Thank You Bryian I am just checking it now, but looks very convincing!
Thank You again for your help!

Bryian Tan 2-Mar-17 14:34pm

You're welcome.

Karthik_Mahalingam 2-Mar-17 22:38pm

5