将持久活动 类 附加到导航栏范围内的导航元素 (AngularJS)
Attaching persistent active classes to navigation elements in navbar scope (AngularJS)
所以我有一个导航列表元素,我希望 AngularJS 存储哪个选项卡处于活动状态,然后在发生重新路由时随时将 'active' class 添加到该选项卡。我正在尝试将活动选项卡的名称简单地打印到当前的日志中。我之前没有在指令的 'link' 选项中 linked 一个函数,所以我的语法可能是错误的。
我的导航指令:
navigation.$inject = ['$modal', 'localStorageService', '$log']
function navigation ($modal, localStorageService, $log) {
var vm = this;
return {
restrict: 'EA',
templateUrl: '/common/directives/navigation/navigation.template.html',
link : function ($scope, $log, localStorageService) {
$scope.setActive = function (tab) {
$scope.active = tab;
$log.debug($scope.active);
}
}
};
}
我的 HTML(我的 'pagination' 导航元素之一):
<li><a href="/#/cw" ng-click="$scope.setActive('cw')">Connect Wise</a></li>
此时我只是尝试访问 link 中的内容,并将传递到我指令的 'link' 函数中的变量打印到浏览器的控制台。
这看起来应该很容易,但我一辈子都弄不明白。
编辑:我应该补充一点,我目前的方法是基于此:How to define a function inside Angular-js Directive
你搞乱了 HTML 以及指令
HTML
<li><a href="/#/cw" ng-click="setActive('cw')">Connect Wise</a></li>
指令
navigation.$inject = ['$modal', 'localStorageService', '$log']
function navigation($modal, localStorageService, $log) {
return {
restrict: 'EA',
templateUrl: '/common/directives/navigation/navigation.template.html',
link: function(scope, element, attrs) {
$scope.setActive = function(tab) {
scope.active = tab;
$log.debug(scope.active);
}
}
};
}
恕我直言,这种方法并不特别符合常见的 AngularJS 约定。使用指令来满足您的导航需求可能有点过头了。
一般来说,社区已经接受 Angular UI-Router 作为导航问题的解决方案。
如果您使用 ui-router,您可以向导航控制器的范围添加一个函数,该函数检查当前 state/route 的 $state 服务,以查看您正在寻找的路线当前处于活动状态。
即使你没有使用 ui-router,我的建议是拥有一个服务来告诉你的应用程序你当前的路线是什么,并使用类似
<a ng-click="goToState('home')" ng-class="{active: isStateActive('home')}">Home</a>
其中 $scope.isStateActive(stateName)
是您导航控制器作用域上的函数,它决定(如果我们当前处于 'home' 中,是使用 ui-路由器的 $state 服务还是您自己开发的服务state 和 $scope.goToState(stateName)
是启动状态转换的函数
所以我有一个导航列表元素,我希望 AngularJS 存储哪个选项卡处于活动状态,然后在发生重新路由时随时将 'active' class 添加到该选项卡。我正在尝试将活动选项卡的名称简单地打印到当前的日志中。我之前没有在指令的 'link' 选项中 linked 一个函数,所以我的语法可能是错误的。
我的导航指令:
navigation.$inject = ['$modal', 'localStorageService', '$log']
function navigation ($modal, localStorageService, $log) {
var vm = this;
return {
restrict: 'EA',
templateUrl: '/common/directives/navigation/navigation.template.html',
link : function ($scope, $log, localStorageService) {
$scope.setActive = function (tab) {
$scope.active = tab;
$log.debug($scope.active);
}
}
};
}
我的 HTML(我的 'pagination' 导航元素之一):
<li><a href="/#/cw" ng-click="$scope.setActive('cw')">Connect Wise</a></li>
此时我只是尝试访问 link 中的内容,并将传递到我指令的 'link' 函数中的变量打印到浏览器的控制台。
这看起来应该很容易,但我一辈子都弄不明白。
编辑:我应该补充一点,我目前的方法是基于此:How to define a function inside Angular-js Directive
你搞乱了 HTML 以及指令
HTML
<li><a href="/#/cw" ng-click="setActive('cw')">Connect Wise</a></li>
指令
navigation.$inject = ['$modal', 'localStorageService', '$log']
function navigation($modal, localStorageService, $log) {
return {
restrict: 'EA',
templateUrl: '/common/directives/navigation/navigation.template.html',
link: function(scope, element, attrs) {
$scope.setActive = function(tab) {
scope.active = tab;
$log.debug(scope.active);
}
}
};
}
恕我直言,这种方法并不特别符合常见的 AngularJS 约定。使用指令来满足您的导航需求可能有点过头了。
一般来说,社区已经接受 Angular UI-Router 作为导航问题的解决方案。
如果您使用 ui-router,您可以向导航控制器的范围添加一个函数,该函数检查当前 state/route 的 $state 服务,以查看您正在寻找的路线当前处于活动状态。
即使你没有使用 ui-router,我的建议是拥有一个服务来告诉你的应用程序你当前的路线是什么,并使用类似
<a ng-click="goToState('home')" ng-class="{active: isStateActive('home')}">Home</a>
其中 $scope.isStateActive(stateName)
是您导航控制器作用域上的函数,它决定(如果我们当前处于 'home' 中,是使用 ui-路由器的 $state 服务还是您自己开发的服务state 和 $scope.goToState(stateName)
是启动状态转换的函数