CODEWITHSUNDEEP
javascriptangularjs
fourth
fourth

Reputation: 739

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.

Upvotes: 0

Views: 26

Answers (1)

Sajeetharan
Sajeetharan

Reputation: 222722

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>

Upvotes: 1

Related Questions