CODEWITHSUNDEEP
javascriptangularjs
Michael Pittino
Michael Pittino

Reputation: 2178

angular doesn't render $scope

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:

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

Answers (2)

wmock
wmock

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

Alon Eitan
Alon Eitan

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

Related Questions