Question

我的主模板叫home.html，控制器是homeController应用了： $routeProvider：

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

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

工作正常。我为html home.html`分隔header' which included in the模板，如下所示：

<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，我单独controller调用了'header.js which is included in the 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）我试图添加conditonal类，但不工作：

我的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的方式是错误的？或者我需要用父控制器homeController本身编写函数？

我不能为标题保留单独的控制器并包含其他模板吗？

安迪一个人帮我处理？提前谢谢。

更新标题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模板路径开头的“/”。

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

Answer 2

尝试这样的事情：

<span ng-class="show?'activate':'other-class'">

Answer 3

问题是，我正在使用scroll目的的模块。当我发表评论时，它有效。

var newHash = 'anchor3';
        if ($location.hash() !== newHash) {
          $location.hash('anchor3');
        } else {
          $anchorScroll();
        }

我评论了以上所有内容。谢谢大家！

`ng-class`没有使用包含的模板进行函数调用

3 个答案: