javascript - `ng-class` 无法处理来自包含模板的功能调用

Question

我的主模板名为 home.html， Controller 是 homeController 应用的 throw :$routeProvider:

$routeProvider
    .when ("/", {
        templateUrl : "views/home.html",
        controller  : "homeController"
});

$routeProvider
    .otherwise ({
        redirectTo:'/'
});

工作正常。我有一个单独的 header' 模板，它包含在 home.html` 中，如下所示:

<div class="content">
    <ng-include src="'/views/header.html'"></ng-include>
    <div class="globe">
        <div class="progName">
            <div class="swiper"></div>
            <h2 class="active">
                <span class="title">
                    {{activeApp.name}}
                </span>
                <span class="note">{{activeApp.note}}</span>
            </h2>
            <h2 class="que t{{$index+1}}" ng-click="activate(app)" ng-repeat="app in queApp">{{app.name}}</h2>

        </div>

对于header，我有一个名为“header.js”的单独 Controller ，它包含在index.html`文件中。

<script src="app.js"></script>
    <script src="js/script/factory/server.js"></script>
    <script src="js/script/controllers/header.js"></script>
    <script src="js/script/controllers/homeController.js"></script>
    <script src="js/script/directives/home/programNames.js"></script>

在标题中，有一个类，我想有条件地应用，所以我在 header.html 文件(包含在内)中添加了条件

在 header.js (headerController) 中，我尝试添加条件类，但不起作用:

我的 header.js:

angular.module("tcpApp")
    .controller('header', ['$scope', function ($scope) {

        $scope.show = false;

        $scope.menuHandler = function () {
            $scope.show = !$scope.show;
            console.log("i am called");
        }

    }]);

我在这里缺少什么？我添加 Controller 的方式是错误的？或者我需要使用父 Controller homeController 本身编写函数？

我不能为 header 保留单独的 Controller 并包含在其他模板中吗？

安迪谁能帮我处理一下？提前致谢。

更新标题 html:

<header ng-controller="header" >
    <h1><a href="#">TCP</a></h1>
    <nav>
        <a class="menu" ng-click="menuHandler()" href="#">Menu</a>
        <span ng-class="{'activate':show}">
            <a href="#"><span>All</span></a>
            <a href="#"><span>Important</span></a>
            <a href="#"><span>Design</span></a>
            <a href="#"><span>Supply</span></a>
            <a href="#"><span>Contruction</span></a>
            <a href="#"><span>Issue Log</span></a>
        </span>
    </nav>
</header>

Answer 1

在你的 home.html 中尝试这样的事情:

<div class="content">
    <ng-include src="views/header.html"></ng-include>
    //code here
</div>

删除 header.html 模板路径开头的“/”。

我想这应该可以解决问题。