8

I'm taking a course on AngularJS on Coursera.

The code that the instructor demonstrated in the videos works but for some reason I couldn't get to run on my environment:

Page Layout (partial):

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

Snippet A (demonstrated by professor that I couldn't get to work):

var app = angular.module('confusionApp',[]); app.controller('dishDetailController', function() { var dish={ //attributes here; }; this.dish = dish; });

When I would run this function, I don't get any errors in the console but I don't get anything in the display.

Snippet B:

var app = angular.module('confusionApp',[]); app.controller('dishDetailController', function($scope) { var dish={ //attributes here;}; $scope.dish = dish; });

When I do it this way, it works. Is there a difference?

Improve this question
3
  • 1
    Snippet A is invalid. You need to pass controller dependencies into the function. Commented Feb 11, 2016 at 4:00
  • Not sure of the answer but I have also had issue with this, and ended up standardizing on use of $scope.<etc> Commented Feb 11, 2016 at 4:00
  • 1
    Both the examples are valid. The only difference depends on how you refer controller in view. It is a mere difference of controller as vs $scope Commented Feb 11, 2016 at 4:09

3 Answers 3

Reset to default
6

Snippet A is not working most likely because of how the controller is being attached. I am taking a wild guess here.

Where you add ng-controller it should probably look something like:

 <body ng-controller="dishDetailController as dish">

Where as you might have this instead:

 <body ng-controller="dishDetailController">

Might not be the body tag could be a div or something.

And to make more sense of it inside the snippet A controller try:

var app = angular.module('confusionApp',[]); app.controller('dishDetailController', function() { this = {//attributes here} });

Otherwise you might have to write: {{dish.dish.stuff}} inside the template.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

This worked. The controller itself is in the div: <div class="row row-content" ng-controller="dishDetailController as ddc"> I had to type {{ddc.dish.<attribute>}} for it to display correctly. I think one source of my confusion was overusing 'dish'... Thanks for the help!
1

The second snippet (B) is more or less straight out of the documentation https://docs.angularjs.org/guide/controller and is most likely what you are looking for.

In Snippet A, assigning a value via this will apply the value directly to the controller itself. This will make it very difficult to access in other contexts, and is most likely not what you want.

Conversely, Snippet B is leveraging the dependency injection provided by AngularJS to ensure that the proper scope is injected into the method. $scope has a much more complicated lifecycle, but the important thing to note is that this will make dish available outside the context of your controller, such as in an HTML template.

If you need more details, this guy has a way better answer: 'this' vs $scope in AngularJS controllers

Improve this answer

Comments

0 
chech this code it is working <div ng-app='confusionApp' ng-controller='dishDetailController' class="media-body"> <h2 class="media-heading">{{dish.name}} <span class="label label-danger">{{dish.label}}</span> <span class="badge">{{dish.price}}</span></h2> <p>{{dish.description1}}</p> </div> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.2/angular.min.js"></script> <script type="text/javascript"> var app = angular.module('confusionApp',[]); app.controller('dishDetailController', function($scope) { var dish={ label:'name',name:'afzal',price:'10',description1:'this is the price'}; $scope.dish = dish; }); </script>
Improve this answer

1 Comment

I was able to get this version to work (i.e. using $scope in the function).

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.