javascript - View is getting initialized again and again

Question

I'm building a dashboard similar to this one Admin Dashboard Theme

I'm implementing the Right Side SideBar as show in the screenshot

My App code structure is something like:

index.html:
<div ui-view=""></div> 

main.html
<div ui-view=""></div> 
<div ng-include='"app/dashboard/sidebar.html"'></div> 

I have done nesting of view in my main.html where I'm injecting different views. Also, since my right side sidebar is fixed, I want it to be common in all the main views. So, I have just included it in my main.html.

Now, the problem is somehow my sidebar.html is getting initialized again and again no matter if I scroll my page down or perform any action inside sidebar. I have verified it by printing console logs for every controller function which are used in sidebar.html view.

This problem is related to my this post: Earlier, I wasn't able to figure out the actual issue.

Following is my controller and jade code:

angular.module('myApp')
  .controller('SidebarCtrl', function($scope, $rootScope) {
    $scope.message = {};

    $scope.addSideBarToggleClass = function() {
      console.log("addSideBarToggleClass");
      return true;
    }

    $scope.getStatusClass = function(status) {
      console.log("getStatusClass");
      return 'is-online';
    }

    $scope.openChat = function(receiver) {
      console.log("openChat");
    }

    // etc...

  });

<aside ng-class="{ 'control-sidebar-open' : addSideBarToggleClass()}" 
       ng-controller="SidebarCtrl">
  <ul>
    <li ng-class="{active: isTabSelected('chat')}">
      <a data-toggle="tab" ng-click="updateCurrenTab('chat')"></a>
    </li>
    <li ng-class="{active: isTabSelected('home')}">
      <a data-toggle="tab" ng-click="updateCurrenTab('home')"></a>
    </li>
  </ul>
  <div>
    <div ng-class="{active: isTabSelected('home')}">
      <h3>Recent Activity</h3>
    </div>
    <div ng-class="{active: isTabSelected('chat')}">
      <div>
        <h4>Chat {{noOfUsersOnline}}</h4>
        <div>Friends
          <a href="#" ng-repeat="user in users" ng-click="openChat(user)"> 
           <span ng-class="getStatusClass(user.status)"></span>
           {{user.name}}</a>
        </div>
      </div>
    </div>
  </div>
</aside>

I see many logs of "addSideBarToggleClass", "getStatusClass" and every time I click on openChat, I see a log of "openChat" and then again "addSideBarToggleClass" and "getStatusClass"

Can anyone please point out what can be the possible problem for this behavior?

Answer 1

You need to familiarize yourself with the concept of a digest loop in Angular.

In short, every time a digest loop runs, all expressions, e.g. {{name}} or ng-show="isActive && isEnabled", that are being "$watched" by Angular are evaluated (sometimes more than once). This means that if you are invoking a function inside an expression:

<div ng-show="isShown()">

$scope.isShown = function(){
   console.log("expect to see this text a lot of times");
   return true;
};

the function will be executed on every digest loop.

A digest loop runs any time that something in Angular calls $scope.$digest, which by default happens on things like ng-click or ng-change or $http.then, etc..