fourth fourth - 1 month ago 11
AngularJS Question

Weird behavior of my controller variables

I am new in this field, and trying to write some code. Those below are my test:

js:

(function() {
angular.module('dashboard', []);
})();

(function() {
'use strict';
angular.module('dashboard').controller('mainControl', function() {
var self=this;
self.logged = true;
alert("hello");
});
})();


html:

<!DOCTYPE html>
<html lang="en" ng-app='dashboard'>
<head>
<meta charset="utf-8">
<title>Shen's Event Planner</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="all.js"></script>
<!--link rel="stylesheet" href="main.css"-->
</head>
<body ng-controller="mainControl">
<div>
<div ng-show="mainControl.logged">

<button type="button" class="btn" data-toggle="modal" data-target=".signUp">Sign Up</button>
<button type="button" class="btn" data-toggle="modal" data-target=".logIn">Log In</button>
</div>
<div ng-hide="mainControl.logged">
<button type="button" class="btn" data-toggle="modal" data-target=".createEvent">Create Event</button>
<button>Sign Out</button>
</div>
</div>
</body>
</html>


The runnable code is here
https://plnkr.co/edit/ci5FCx4sASTzikgpn0gb?p=preview
I run it and alert is given which means the variable is set. but no matter I set
this.logged
as true of false in the js file. The output is all the same. Could you tell me the reason? Thanks!

I know $scope is a good idea, but I am testing other method here.

Answer

You should use $scope,

(function() {
    'use strict';
    angular.module('dashboard').controller('mainControl', function($scope) {
        $scope.logged = true;
        alert("hello");
      });
})();

DEMO

if you are using Controller As syntax, change your code as follows,

 <body ng-controller="mainControl as mc">
  <div>
    <div ng-show="mc.logged">
      <button type="button" class="btn" data-toggle="modal" data-target=".signUp">Sign Up</button>
      <button type="button" class="btn" data-toggle="modal" data-target=".logIn">Log In</button>
    </div>
    <div ng-hide="mc.logged">
      <button type="button" class="btn" data-toggle="modal" data-target=".createEvent">Create Event</button>
      <button>Sign Out</button>
    </div>
  </div>
</body>