AngularJS - 引用 $route 服务的导航控制器答案

【问题标题】：AngularJS - Nav Controller which references $route serviceAngularJS - 引用 $route 服务的导航控制器
【发布时间】：2017-04-12 04:41:04
【问题描述】：

我一直在研究，但似乎找不到我需要的答案。

我正在使用带有导航标题的 AngularJS 设计一个简单的页面。导航选择是使用路由提供程序解决的。我无法在路由提供程序中为我的导航标头指定控制器，因为我需要为我的 ng-view 的控制器保留它。我需要能够根据我在路由提供程序中定义的变量“activeTab”将我的一个项目的类设置为“活动”。我的导航标头由自定义指令指定。

目前，加载的第一个项目被赋予活动类，但在选项卡之间切换不会更改活动选项卡（但它会更改 ng-view 中显示的页面）。这表明我没有正确更新控制器中的 activeTab 变量，但我该怎么做呢？

这是我的代码：

index.php

<?php 
    include_once('/php/include/check_session.php'); 
?>
<!DOCTYPE html>
<html ng-app="mymapp">
<head>
    <title>My App</title>

    <link rel="stylesheet" type="text/css" href="css/navbar.css">
</head>
<body>
    <nav-header></nav-header>

    <div ng-view></div>

    <script type="text/javascript" src="/libs/angular.js"></script>
    <script type="text/javascript" src="/libs/angular-route.js"></script>
    <script type="text/javascript" src="/libs/jquery-dev-3.2.0.js"></script>

    <script type="text/javascript" src="/libs/aws-sdk.min.js"></script>
    <script type="text/javascript" src="/libs/aws-cognito-sdk.min.js"></script>
    <script type="text/javascript" src="/libs/amazon-cognito-identity.min.js"></script>
    <script type="text/javascript" src="/js/include.js"></script>

    <script type="text/javascript" src="myapp.js"></script>
    <script type="text/javascript" src="myapp.core.js"></script>
    <script type="text/javascript" src="myapp.routes.js"></script>
    <script type="text/javascript" src="myapp.services.js"></script>

    <script type="text/javascript" src="/js/controller/nav.ctrl.js"></script>
    <script type="text/javascript" src="/js/directive/nav.drct.js"></script>
</body>
</html>

myapp.routes.js

/**
 * 
 */
angular.module('mymapp.routes', ['ngRoute'])
    .config(['$routeProvider', routes]);

function routes($routeProvider){
    $routeProvider.
        when('/', {
            templateUrl: 'html/template/home.tmpl.html',
            activeTab: 'home'
        })
        .when('/dashboard', {
            // TODO - Change route to point to check_permissions
            templateUrl: 'html/template/dashboard.tmpl.html',
            activeTab: 'dashboard'
        })
        .when('/contact', {
            templateUrl: 'html/template/contact.tmpl.html',
            activeTab: 'contact'
        })
        .when('/about', {
            templateUrl: 'html/template/about.tmpl.html',
            activeTab: 'about'
        })
        .when('/login', {
            templateUrl: 'php/form_login.php',
            activeTab: 'login'
        })
        .when('/logout', {
            templateUrl: 'php/include/logout.php',
            activeTab: 'login'
        })
        .otherwise({
            redirectTo: '/'
        })
}

nav.drct.js

/**
 * Directive for Displaying a Navigation Header
 */
angular.module('mymapp.core').directive('navHeader', navHeaderDirective);

function navHeaderDirective(){
    return {
        templateUrl: 'html/template/nav.tmpl.html',
        restrict: 'E',
        controller: 'NavController',
        controllerAs: 'navCtrl'
    }
}

nav.ctrl.js

/**
 * Controller for Nav Header
 */
angular.module('mymapp.core').controller('NavController', [
    '$scope',
    '$route',
    navController
]);

function navController($scope, $route){
    $scope.activeTab = $route.current.activeTab;
}

nav.tmpl.html

<div class="navbar" id="navbar">
    <ul>
        <li>
            <a href="#/" ng-class="{ 'active': activeTab == 'home' }" >Home</a>
        </li>
        <li>
            <a href="#/dashboard" ng-class="{ 'active': activeTab == 'dashboard' }" >Dashboard</a>
        </li>
        <li>
            <a href="#/contact" ng-class="{ 'active': activeTab == 'contact' }" >Contact</a>
        </li>
        <li>
            <a href="#/about" ng-class="{ 'active': activeTab == 'about' }" >About</a>
        </li>
    </ul>
</div>

【问题讨论】：

您是否尝试将ng-controller="navCtrl" 添加到<div class="navbar" id="navbar"> ？
我刚试过。现在我的标签都没有显示“活动”类。

标签： javascript html angularjs angularjs-directive controller

【解决方案1】：

可以使用 routeChange 事件来监听变化：

function navController($scope, $route){

  updateActiveTab();

  $scope.$on('$routeChangeSuccess', updateActiveTab);

  function updateActiveTab(){
     $scope.activeTab = $route.current.activeTab;
  }  

}

目前您只分配一个没有继承的原语，因此仅在控制器首次运行时设置一次

或者，如果您将 $route.current 对象传递给视图，视图将能够观察其属性的更改并在摘要期间得到更新：

function navController($scope, $route){
  $scope.current = $route.current;
}

查看

<a href="#/" ng-class="{ 'active': current.activeTab == 'home' }" >Home</a>

【讨论】：

第一个解决方案效果很好。感谢您的帮助！