javascript - Controller property not being show in view in this Angular js app -
below aap.js 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 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, property of controller, not being shown in view. why so?
edit again: miss read issue. using this keyword correct tab property not being shown when click image because ng-click using tab not g.tab. see updated updated updated fiddle: http://jsfiddle.net/z8uby8oz/2/
you cannot use yes can see edit.this keyword within controllers that. context of controller method not scope.
you can use syntax withing services not controllers, instead scope injected in along other services, factories etc.
instead should be
app.controller('gallerycontroller',function($scope){ $scope.tab = true; }); most overkill added fiddle demonstrate anyway: http://jsfiddle.net/z8uby8oz/
edit: can achieved using this keyword. didn't know learn new everyday. using as operator in ng-controller.
see updated fiddle: http://jsfiddle.net/z8uby8oz/1/ , docs found in: https://docs.angularjs.org/api/ng/directive/ngcontroller#example
my understanding as operator binds scope property in view pass test myscope means bind this keyword of test controller the myscope property in view.
hopefully makes sense.
Comments
Post a Comment