AngularJS expressions not working

Question

I'm not able to display expression in AngularJS. Below is my the HTML code.

<!DOCTYPE html>
<html data-ng-app="appname">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
    <script src="javascript.js"></script>
</head>
<body>
<div data-ng-controller="appCtrl">
    <p>{{appname.product.name}}</p>
</div>
</body>
</html>

This is javascript.js file:

(function () {
    var appname = angular.module('appname', []);

    var gem = {
        name: "Ring",
        price: 2.9,
        Description: "",
    };

    appname.controller('appCtrl', function () {
        this.product = gem;
    });
});

The webpage still displays: {{appname.product.name}}.

Did you ever invoke your function? I don't see a () near the end. — ryanyuyu
– ryanyuyu, Commented Sep 29, 2015 at 13:11
I did not. Im a beginner in angularjava. im learning through codeschool. Thanks for the comment — erathina
– erathina, Commented Sep 29, 2015 at 16:49

Hardik Gondalia · Accepted Answer · 2015-09-29 13:08:08Z

1

You need to include scope in the controller as well as in view

Change you code like this:

Controller:

var appname = angular.module('appname', []);
appname.controller('appCtrl', function($scope) 
{
  $scope.gem = {
        name:"Ring",
        price:2.9,
        Description:"",
        };
 });

HTML:

<html data-ng-app="appname">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="javascript.js"></script>
</head>
<body>
<div data-ng-controller="appCtrl">
<p>{{gem.name}}</p>
</div>
</body>
</html>

Here is the codepen link: http://codepen.io/anon/pen/epgmGd

answered Sep 29, 2015 at 13:08

Hardik Gondalia

3,7276 gold badges39 silver badges86 bronze badges

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

Comments

Tarun Dugar · Accepted Answer · 2015-09-29 13:08:50Z

1

You are doing a number of things in a wrong way.

Use the 'as' syntax if you want to follow 'this' (as opposed to $scope) approach.

In your markup:

<div data-ng-controller="appCtrl as app">
    <p>{{app.product.name}}</p>
</div>

In your controller:

this.product = {
        name:"Ring",
        price:2.9,
        Description:"",
        };

answered Sep 29, 2015 at 13:08

Tarun Dugar

8,9938 gold badges50 silver badges81 bronze badges

Comments

Shashank Agrawal · Accepted Answer · 2015-09-29 13:16:08Z

There are two ways to fix this:

First is to use the $scope way:

var appname = angular.module('appname', []);

appname.controller('appCtrl', function ($scope) {
    $scope.gem = {
        name: "Ring",
        price: 2.9,
        Description: "",
    };
});

Now modify your view as:

<div data-ng-controller="appCtrl">
    <p>{{product.name}}</p>
</div>

Another way which you are using is the this way:

var appname = angular.module('appname', []);

appname.controller(function() {
    this.gem = {
        name: "Ring",
        price: 2.9,
        Description: "",
    };
});

And modify your view as:

<div data-ng-controller="appCtrl as main">
    <p>{{main.product.name}}</p>
</div>

Also, like @ryanyuyu mentioned in the comment, you need to immediatly invoke your function: like so:

(function () {
    // Your code
})();    // Add () at last

Devraj Gadhavi · Accepted Answer · 2017-03-29 13:29:37Z

0

Probably undocumented case.

In my case, I had got $window level variables of the same name that I was declaring on $scope level.

After changing the name of the variable it worked.

Strange, as it does recognize $scope level variable in js code but when it comes to putting the value in expressions it gets confused.

//Global JS variable
var currentLocationName = "Nice Location";

I was copying this global variable at $scope level.

$scope.currentLocationName = $window.currentLocationName;

And was having it in the expression in my HTML view.

<b>Your current location is {{ currentLocationName }}</b>

And this was not working. I changed the name at $scope level and it worked.

My two cents!

answered Mar 29, 2017 at 13:29

Devraj Gadhavi

3,6613 gold badges40 silver badges70 bronze badges

Collectives™ on Stack Overflow

AngularJS expressions not working

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related