将持久活动类附加到导航栏范围中的导航元素(AngularJS）

Attaching persistent active classes to navigation elements in navbar scope (AngularJS)

本文关键字：导航 范围 元素 AngularJS 活动      更新时间：2024-05-29

所以我有一个导航列表元素，我希望AngularJS存储哪个选项卡是活动的，然后在任何重新路由发生时将"活动"类添加到该选项卡。我目前正试图简单地将活动选项卡的名称打印到日志中。我以前没有在指令的"link"选项中链接过函数，所以我的语法可能是错误的。

我的导航指令：

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（我的"分页"导航元素之一）：

<li><a href="/#/cw" ng-click="$scope.setActive('cw')">Connect Wise</a></li>

在这一点上，我只是试图访问链接中的内容，并将传递到指令的"链接"函数中的变量打印到浏览器中的控制台。

这看起来应该很容易，但我一辈子都想不出来。

编辑：我应该补充一点，我目前的方法是基于此：如何在Angular js Directive 中定义函数

IMHO这种方法并不特别适用于常见的AngularJS约定。使用指令来满足您的导航需求可能是一种过度杀戮。

一般来说，社区已经接受Angular UI Router作为解决导航难题的解决方案。

如果你使用ui路由器，你可以在导航控制器的作用域中添加一个功能，该功能会检查$state服务的当前状态/路由，以查看你要查找的路由当前是否处于活动状态。

即使你不使用ui-router，我的建议是有一个服务，告诉你的应用程序你的当前路线是什么，并使用类似的东西

<a ng-click="goToState('home')" ng-class="{active: isStateActive('home')}">Home</a>

其中$scope.isStateActive(stateName)是导航控制器作用域上的函数，用于确定（无论是使用ui路由器的$state服务还是您自己开发的服务，如果我们当前处于"主页"状态，而$scope.goToState(stateName)是启动状态转换的函数

您扰乱了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);
            }
        }
    };
}
相关文章：