Controller property not being show in view in this Angular js app

Question

Below is aap.js from my AngularJS app.

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

(function(){

    app.controller('GalleryController',function(){
        this.tab = true;
    }); 
})();

and gallery.html is:

<html ng-app="gallery">

<head>    
    <link rel="stylesheet" type="text/css" href="bootstrap.min.css">
    <script type="text/javascript" src="angular.js"></script>
    <script type="text/javascript" src="app.js"></script>
    <link rel="shortcut icon" href="">    
</head>
<body ng-contoller="GalleryController as g">
 <section >
 <ul>
     <li><img ng-click="tab=1" src="images/gem-01.jpg" height="100" /></li>
 </ul>
     <h1>{{g.tab}}</h1>
</section>
</body>
</html>

g.tab, which is a property of controller, is not being shown in view. Why is that so?

$scope does the 2 way binding between controller and view. So you need to set things on $scope and not on this for binding to work. — brute_force, Sep 21 '15 at 10:23
@brute_force Can't this be done with using `this`? Like this example. http://stackoverflow.com/a/32679215/4904589 — user4904589, Sep 21 '15 at 10:28
Yes this can be used. From 1.2.0 onwards it can be used. Read this http://stackoverflow.com/a/19940503/1235298 — brute_force, Sep 21 '15 at 10:40

ste2425 · Accepted Answer · 2015-09-21T10:38:06.680

EDIT AGAIN: I miss read your issue. You are using the this keyword correct however the tab property is not being shown when you click the image because the ng-click is using tab not g.tab. See updated updated updated fiddle: http://jsfiddle.net/z8uby8oz/2/

~~You cannot use the this keyword within your controllers like that. The context of your controller method is not your scope.~~ Yes you can see edit.

You can use that syntax withing services but not controllers, instead your scope is injected in along with other services, factories etc.

Instead it should be

app.controller('GalleryController',function($scope){
    $scope.tab = true;
});

Most likely overkill but added fiddle to demonstrate anyway: http://jsfiddle.net/z8uby8oz/

EDIT: This can be achieved using the this keyword. I didn't know this learn something new everyday. That is by using the as operator in your ng-controller.

See updated fiddle: http://jsfiddle.net/z8uby8oz/1/ And docs i found it in: https://docs.angularjs.org/api/ng/directive/ngController#example

My understanding is the as operator binds your scope to a property in your view that you pass test as myScope means bind the this keyword of your test controller the the myScope property in your view.

Hopefully that makes sense.

Can't this be done with using `this`? Like this example. http://stackoverflow.com/a/32679215/4904589 — user4904589, Sep 21 '15 at 10:25

score 0 · Answer 2 · answered Sep 21 '15 at 10:22

you bind all the values to $scope

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

    (function(){

        app.controller('GalleryController',function($scope){
            $scope.tab = true;
        }); 
    })();

your HTML looks like

<html ng-app="gallery">

<head>    
    <link rel="stylesheet" type="text/css" href="bootstrap.min.css">
    <script type="text/javascript" src="angular.js"></script>
    <script type="text/javascript" src="app.js"></script>
    <link rel="shortcut icon" href="">    
</head>
<body ng-contoller="GalleryController">
 <section >
 <ul>
     <li><img ng-click="tab=1" src="images/gem-01.jpg" height="100" /></li>
 </ul>
     <h1>{{tab}}</h1>
</section>
</body>
</html>

Can't this be done with using `this`? Like this example. http://stackoverflow.com/a/32679215/4904589 — user4904589, Sep 21 '15 at 10:24
$scope is the variable which transfer values between controller and views. You can bind multiple objects in $scope. you can't be achieved by simply this. — Kashif Mustafa, Sep 21 '15 at 10:27

Controller property not being show in view in this Angular js app

2 Answers2