javascript - AngularJS-引用$ route服务的Nav Controller

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

我正在使用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>

最佳答案

可以使用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>

jsnav

javascript - AngularJS-引用$ route服务的Nav Controller