gpt4 book ai didi

javascript - Angular 主动链接导航

转载 作者:行者123 更新时间:2023-12-03 10:33:56 24 4
gpt4 key购买 nike

这里是 Angular 初学者。我试图基本上让我的链接在我进入给定页面后处于事件状态。发现了很多例子,但没有一个起作用,所以一定是我做错了。

这是我一直在尝试的( Controller ):

angular.module('MyApp')
.controller('HomeCtrl', ['$scope', function ($scope) {
$('body').addClass('homepage');

$scope.isActive = function(route) {
return route === $location.path();
}
}]);

HTML:

<li "ng-class" = "{active:isActive('/') || isActive('/home')}"> 
Home
</li>
<li "ng-class" = "{active:isActive('/about')}">
About
</li>
<li "ng-class" = "{active:isActive('/contact')}">
Contact
</li>

应用程序本身:

var app = angular
.module('MyApp', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch',
'templates',
'ng-token-auth'
]).config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$routeProvider
.when('/home', {
templateUrl: 'home.html',
controller: 'HomeCtrl'
})
.when('/', {
templateUrl: 'home.html',
controller: 'HomeCtrl'
})
.when('/contact', {
templateUrl: 'contact.html',
controller: 'ContactCtrl'
})
.when('/about', {
templateUrl: 'about.html',
controller: 'AboutCtrl'
})
.otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
}])

因此,无论我位于哪个页面,ng-class 都不会执行任何操作,控制台中不会出现任何错误。但是,如果我在家这样做:

<li "ng-class" = "{active:true}"> 
Home
</li>

然后我在链接上获得事件类,这是输出:

<li ng-class="{active:true}" class="active">
Home
</li>

我在这里做错了什么?为什么它不按照应有的方式插入函数 isActive ?

最佳答案

您无法使用逻辑来检查 HomeCtrl 内的事件链接,因为它是路由之一。当加载其他路由时,不会加载 HomeCtrl

应该在ng-view之外定义 Controller ,例如RootCtrl。应将 isActive 函数添加到其中。

由于 subview 作用域可以访问父作用域,因此您可以正常在 subview 中使用 isActive

更新:考虑 html

<body ng-controller='RootCtrl'>
<div ng-view></div>
</body>

RootCtrl上添加isActive函数。

关于javascript - Angular 主动链接导航,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29090206/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com