Angular two different include inside controller have different $scope

Question

<!-- index.html --> 
<div ng-controller="navbarController">
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div ng-include src="'./html/bars.html'"></div>
            <div ng-include src="'./html/extendBars.html'"></div>
        </div>
    </div>
    <nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
        <div class="container">
            This is my cool bottom bar :)
        </div>
    </nav>
</div>
<!-- ./html/bars.html -->
<a class="navbar-brand" ui-sref="Welcome">Brand</a>
<ul class="nav navbar-nav">
    <li ng-class="{ active: TopMenu=='OurWork'}" ng-click="TopMenu='OurWork'"><a ui-sref="OurWork">Our Work</a>
    </li>
</ul>
<!-- ./html/extendBars.html -->
<ul class="nav navbar-nav">
    <li ng-class="{ active: TopMenu=='ProjectManager'}" ng-click="TopMenu='ProjectManager'"><a ui-sref="ProjectManager">Projects Manager</a>
    </li>
    <li  ng-class="{ active: TopMenu=='Publish'}" ng-click="TopMenu='Publish'"><a ui-sref="Publish">Publish</a>
    </li>
    <li><a href="/logout" class="btn btn-default btn-sm">Logout</a>
    </li>
</ul>

The problem is that this two files that contain two part of navbar have different $scope, when i change value of TopMenu it changes only on one of two files. In my js controller code when i define $scope.TopMenu is defines correct on both files. Why this is happening?

Mike · Accepted Answer · 2014-10-22 16:38:54Z

1

ng-include creates a child scope. since you're using two ng-includes, a new child scope is created for each, both prototypically inheriting from the parent scope (the navbarController).

by prototypical inheritance, any objects on the parent will be seen in the child scopes (as long as a blocking object hasn't been created on the child). however, setting a value on the child scope won't be seen on the other child, as it's not part of it's inheritance chain (it only climbs directly up).

from the child scopes, you could access $rootScope instead of $scope in order to access the values above. alternately, you could encapsulate the data you're wanting to share between the scopes in a Service (in most cases, this is the preferred method to keep things clean).

EDIT to include function based approach based on question in comments:

instead of trying to directly set and access values on the parent scope, a quick alternative would be to create functions in your navbarController to handle this. a service is potentially cleaner, especially if you're using this from other areas in the app, but something like this should work (I didn't create a plnkr to test, and i obviously don't know what's in your existing navbarController -- so this is just a concept).

in your controller file:

.controller('navbarController', function($scope) {
     var currentMenu = 'defaultMenuName';
     $scope.setMenu = function(newMenu) {
          currentMenu = newMenu;
     };
     $scope.isMenu = function(testMenu) {
          return currentMenu == testMenu;
     };
}

in your html:

 <li ng-class="{ active: isMenu('OurWork')}" ng-click="setMenu('OurWork')"><a ui-sref="OurWork">Our Work</a>

Example of this approach in action: http://plnkr.co/edit/eQKbjjRVdSqDjLlpLPCB?p=preview

edited Oct 22, 2014 at 16:38

answered Oct 22, 2014 at 15:19

Mike

1,2461 gold badge7 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Honchar Denys Over a year ago

well,

<li ng-class="{ active: $rootScope.TopMenu=='ProjectManager'}" ng-click="$rootScope.TopMenu='ProjectManager'"><a ui-sref="ProjectManager">Projects Manager</a>

i did what you said and the result is same. In js i added $rootScope inside controller, i dont know how to add $rootScope to ng-include

Honchar Denys Over a year ago

as i can see one of solutions is to create new controller in both files and access from that controller $rootScope

Mike Over a year ago

$rootScope is available in the controller, if you inject it, not from the HTML. rather than going that route, you could create a function in your navbarController, maybe something like setCurrentMenu(newMenu) and attach it on $scope ($scope.setTopMenu = function...). The function will be inherited into both child scopes. Then, you could call it from your templates via a function call rather than directly setting values on scope. You'd also want to create a getCurrentMenu() function in the same way, which would just return the current value.

Honchar Denys Over a year ago

i had that, still in two different files have different contrller

Mike Over a year ago

i created a plnkr with the approach i mentioned. seems to work fine. you'll notice that clicking the set menu button from either include affects the value in both. plnkr.co/edit/eQKbjjRVdSqDjLlpLPCB?p=preview

Collectives™ on Stack Overflow

Angular two different include inside controller have different $scope

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related