Initializing scope variables in controllers

Question

So I am completely new to AngularJS and followed a course and started "learning" this framework. I watched the 2 screencasts at the top of this page:

https://github.com/curran/screencasts/tree/gh-pages/introToAngular

After watching both screencasts and looking into some of the examples I tried to create my own simple Angular application where I tried to work with some controllers. Now I have the following code:

Index.html

<html ng-app="WIMT">
<head>
    <title>trying out angularJS</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
    <script type="text/javascript" src="../bower_components/angular/angular.min.js"></script>
    <script type="text/javascript" src="../JS/app.js"></script>

</head>
<body>

<div ng-controller="controllerA as a">
    {{a.varA}}
</div>

<div ng-controller="controllerB as b">
    {{b.varB}}
</div>

<div ng-controller="controllerC as c">
    {{c.varC}}
</div>

</body>
</html>

JS

(function() {

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


app.controller('controllerA',function($scope,$http){
    $scope.varA = "A";
});

app.controller('controllerB',['$scope',function($scope) {
    $scope.varB = "B";
}
]);

app.controller('controllerC',function($scope, $http) {
    var reg = this;

    reg.varC = "C";
});

})();

After I tried to bind varA to the scope in controller A I found out that it didn't work and I looked for a solution on the internet. I have found a few different ways (B & C) that should (could?) work. Only option C works and shows C when I run the html. Both A & B show nothing.

Why do option A and B not work in this example?

Btw, you don't have to encase your angular app in a self-executing anonymous function. — Kyle
– Kyle, Commented Jun 1, 2016 at 13:06

Thalaivar · Accepted Answer · 2016-06-01 12:43:54Z

3

Because you are using controllerAs syntax, that's why the third one is working and first two are not.

<div ng-controller="controllerA as a">
    {{a.varA}}
</div>

<div ng-controller="controllerB as b">
    {{b.varB}}
</div>

<div ng-controller="controllerC as c">
    {{c.varC}}
</div>

If you want the a.varA and b.varB to print, you have to change to below:

<div ng-app="app">
    <div ng-controller="controllerA as a">
    {{varA}}
    </div>

    <div ng-controller="controllerB as b">
        {{varB}}
    </div>

    <div ng-controller="controllerC as c">
        {{c.varC}}
    </div>
</div>

http://jsfiddle.net/t0hhp5wz/

answered Jun 1, 2016 at 12:43

Thalaivar

23.7k5 gold badges63 silver badges71 bronze badges

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

2 Comments

Niek Jonkman Over a year ago

Thanks for your reaction, your solution does work. But this leaves me with a question: Why would I use controllerA as a if I don't directly use a.varA but varA?

Thalaivar Over a year ago

You should not use, i just gave you an example on how to print... its best to use controllerAs syntax over using $scope.

AlainIb · Accepted Answer · 2016-06-01 12:45:32Z

0

this is pretty the same thing :

app.controller('controllerA',function($scope,$http){
    $scope.varA = "A";
});

this syntax will work if you use minification, the previous not.

app.controller('controllerB',['$scope',function($scope) {
    $scope.varB = "B";
}
]);

use this syntax in the view :

 <div ng-controller="controllerA">
  {{varA}}
</div>

answered Jun 1, 2016 at 12:45

AlainIb

4,6156 gold badges42 silver badges67 bronze badges

1 Comment

Matt Lishman Over a year ago

It is generally considered best practice to use the controllerAs syntax. Not this one.

Ashok M A · Accepted Answer · 2016-06-01 12:51:22Z

0

since you are using controller as alias, option A & B are placed inside controller scopes which are childScopes of $scope.

if you console.log the $scope you will see option A & B created inside controller scope and not in $scope which is parent scope for those controllers.

answered Jun 1, 2016 at 12:51

Ashok M A

5287 silver badges14 bronze badges

4 Comments

a better oliver Over a year ago

$scope IS the controller's scope. controller as adds the controller as property to the scope.

Ashok M A Over a year ago

controller's scope...? I thought scope specific to the controller will be created when we use the directive approach. please clarify me on this.

a better oliver Over a year ago

ng-controller creates a scope that can be accessed with $scope in the controller. controller as vm adds the controller instance as property vm to the scope. Within the controller this would be equal to $scope.vm. So this.a would be equal to $scope.vm.a, and {{vm.a}} in the template. But there is only one scope, not two, as your answer suggests.

Ashok M A Over a year ago

thanks for clarification. yeah I meant the controllers as chile scopes which is not the case at all :D

Collectives™ on Stack Overflow

Initializing scope variables in controllers

3 Answers 3

2 Comments

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related