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=".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}}.
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./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}}.
-
1
Did you ever invoke your function? I don't see a
()near the end. – ryanyuyu Commented Sep 29, 2015 at 13:11 - I did not. Im a beginner in angularjava. im learning through codeschool. Thanks for the ment – erathina Commented Sep 29, 2015 at 16:49
4 Answers
Reset to default 1You 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./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
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:"",
};
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 ment, you need to immediatly invoke your function: like so:
(function () {
// Your code
})(); // Add () at last
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 es 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!