Angularjs 角度两个不同的控制器内包含不同的$scope 这是我最酷的酒吧：）

问题是，这两个包含navbar两部分的文件具有不同的$scope，当我更改TopMenu的值时，它只会更改两个文件中的一个。在我的js控制器代码中，当我定义$scope.TopMenu时，两个文件上的定义都是正确的。为什么会发生这种情况？

ng include创建子作用域。由于您使用的是两个ng Include，因此会为每个ng Include创建一个新的子作用域，这两个作用域都是从父作用域（navbarController）继承的

通过原型继承，父对象上的任何对象都将在子作用域中看到（只要尚未在子对象上创建阻塞对象）。但是，在子作用域上设置值不会在另一个子作用域上看到，因为它不是继承链的一部分（它只会直接向上爬升）

从子作用域中，您可以访问$rootScope而不是$scope，以便访问上述值。或者，您可以封装希望在服务中的作用域之间共享的数据（在大多数情况下，这是保持整洁的首选方法）

编辑以包括基于评论中问题的基于功能的方法：

与直接设置和访问父作用域上的值不同，一个快速的替代方法是在navbarController中创建函数来处理此问题。服务可能更干净，特别是如果你在应用程序的其他区域使用它，但类似的东西应该可以工作（我没有创建一个plnkr来测试，我显然不知道你现有的navbarController中有什么——所以这只是一个概念）

在控制器文件中：

<!-- 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>

在html中：

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

---

好吧，
项目经理
我照你说的做了，结果是一样的。在js中，我在控制器中添加了$rootScope，我不知道如何将$rootScope添加到ng includeas，因为我可以看到解决方案之一是在这两个文件中创建新控制器，并且从该控制器访问$rootScope$rootScope在控制器中可用，如果您注入它，而不是从HTML。您可以在navbarController中创建一个函数，比如setCurrentMenu（newMenu）并将其附加到$scope（$scope.setTopMenu=function…）上，而不必走这条路线。该函数将继承到两个子作用域中。然后，您可以通过函数调用从模板调用它，而不是直接在作用域上设置值。您还需要以相同的方式创建一个getCurrentMenu（）函数，该函数只返回当前值。看起来很好用。您会注意到，单击其中一个“包含”中的“设置菜单”按钮会影响这两个菜单中的值。
 <li ng-class="{ active: isMenu('OurWork')}" ng-click="setMenu('OurWork')"><a ui-sref="OurWork">Our Work</a>