Question

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

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

目前，加载的第一个项目是活动类，但在选项卡之间切换不会更改活动选项卡（但它会更改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>

Answer 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>

AngularJS - 引用$ route服务的Nav Controller

1 个答案: