角两个不同的包含控制器内部有不同的$ 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>

问题是这两个包含导航栏的两个部分的文件具有不同的$ scope，当我更改TopMenu的值时，它仅对两个文件之一进行更改。 在我的js控制器代码中，当我定义$ scope.TopMenu时，两个文件都定义正确。 为什么会这样呢？

Answer 1

ng-include创建一个子范围。 由于您使用的是两个ng-includes，因此会为每个子级创建一个新的子范围，它们都典型地从父范围（navbarController）继承。

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

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

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

与其尝试直接在父作用域上设置和访问值，不如直接在navbarController中创建函数来处理此问题。 服务可能会更清洁，尤其是如果您正在应用程序的其他区域中使用它，但是类似的东西应该可以工作（我没有创建plnkr进行测试，而且我显然不知道您现有的navbarController中有什么- -这只是一个概念）。

在您的控制器文件中：

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

在您的html中：

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

这种方法的实际作用示例： http : //plnkr.co/edit/eQKbjjRVdSqDjLlpLPCB?p=preview