我一直在研究，但似乎找不到我需要的答案。
我正在使用 AngularJS 设计一个带有导航标题的简单页面。导航选择是使用路线提供者来解决的。我无法在路线提供程序中为导航 header 指定 Controller ，因为我需要为 ng-view 的 Controller 保留此 Controller 。我需要能够根据我在路由提供程序中定义的变量“activeTab”将我的其中一个项目的类设置为“active”。我的导航 header 由自定义指令指定。
目前，加载的第一个项目被赋予事件类，但选项卡之间的切换不会更改事件选项卡(但它会更改 ng-view 中显示的页面)。这表明我没有正确更新 Controller 中的 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;
}
}
目前，您仅分配一个没有继承的原语，因此仅在 Controller 首次运行时设置一次
<小时/>或者，如果将 $route.current 对象传递给 View ， View 将能够监视其属性的更改，并在摘要期间进行更新:
function navController($scope, $route){
$scope.current = $route.current;
}
查看
<a href="#/" ng-class="{ 'active': current.activeTab == 'home' }" >Home</a>
关于javascript - AngularJS - 引用 $route 服务的导航 Controller ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43354644/