Reputation: 2178
I try to display some variable of my controller, but the output is just {{UserCtrl.user}}
instead of the content of UserCtrl.user
.
I got the following file structure:
index.html
scripts/app.js
This is the code of index.html
:
<!doctype html>
<html lang="en" ng-app="birdsnest">
<head>
<meta charset="utf-8">
<title>Birdsnest</title>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap-theme.css">
</head>
<body>
<div ng-controller="UserController as UserCtrl">
{{UserCtrl.user}}
</div>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="scripts/app.js"></script>
</body>
</html>
scripts/app.js
:
(function() {
var app = angular.module('birdsnest', []);
app.controller('UserController', ['scope', function($scope) {
$scope.user = 'Michael';
}]);
})();
Upvotes: 1
Views: 134
Reputation: 5492
When you're using the ControllerAs
syntax in your HTML, the values that end up getting bound to the controller instance is actually on your this
object.
What this means is that your code that attaches user
to the scope
object is incorrect; instead you should do the following:
app.controller("UserController", function() {
this.user = "Michael";
});
Upvotes: 1
Reputation: 12025
Change this line:
app.controller('UserController', ['scope', function($scope) {
To:
app.controller('UserController', ['$scope', function($scope) {
Edit:
If you're using controllerAs
then I think you should rewrite your code:
app.controller('UserController', function() {
this.user = 'Michael';
});
Upvotes: 2