CODEWITHSUNDEEP
javascripthtmlangularjs
erathina
erathina

Reputation: 53

AngularJS expressions not working

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

Upvotes: 3

Views: 8192

Answers (4)

Devraj Gadhavi
Devraj Gadhavi

Reputation: 3611

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!

Upvotes: 0

Shashank Agrawal
Shashank Agrawal

Reputation: 25797

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

Upvotes: 1

Tarun Dugar
Tarun Dugar

Reputation: 8971

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:"",
        };

Upvotes: 1

Hardik Gondalia
Hardik Gondalia

Reputation: 3717

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

Upvotes: 1

Related Questions