Currently, I'm in the process of developing a dashboard that bears some resemblance to this one Admin Dashboard Theme
In my project, I am incorporating a fixed Right Side Sidebar similar to the one shown in this screenshot https://i.sstatic.net/7KdMY.png
The structure of my application code looks something like this:
index.html:
<div ui-view=""></div>
main.html
<div ui-view=""></div>
<div ng-include='"app/dashboard/sidebar.html"'></div>
I have nested views within my main.html where I am injecting various views. Since the right side sidebar is fixed and should appear on all main views, I have included it in the main.html file.
However, I am encountering an issue where my sidebar.html seems to be getting initialized repeatedly, regardless of whether I scroll down the page or interact with any elements inside the sidebar. This was confirmed by adding console logs to each controller function used in the sidebar.html view.
This problem is linked to a query I posted earlier on Stack Overflow. Initially, I struggled to identify the root cause.
Below are snippets of 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 notice multiple instances of "addSideBarToggleClass", "getStatusClass", and every time I click on openChat, there is a log for "openChat", followed by another round of "addSideBarToggleClass" and "getStatusClass".
Could someone help shed light on what might be causing this unusual behavior?