Question

所以我有一个导航列表元素，我希望AngularJS存储哪个标签处于活动状态，然后添加＆＃39; active＆＃39;每次重新路由发生时，该类都会转到该选项卡。我想简单地将活动标签的名称打印到当前的日志中。我还没有在“链接”链接功能。之前的指令选项，所以我的语法可能是错误的。

我的导航指令：

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

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

此时我只想尝试访问链接中的内容，并打印传递给我的指令的变量＆＃39;链接＆＃39;在浏览器中对控制台起作用。

这看起来应该很容易但我无法理解我的生活。

编辑：我应该补充一下，我目前的方法基于：How to define a function inside Angular-js Directive

Answer 1

恕我直言，这种方法对于常见的AngularJS惯例并不是特别正确。使用指令来满足您的导航需求可能是一种过度杀戮。

一般来说，社区已经采用Angular UI-Router作为导航困境的解决方案。

如果您使用ui-router，您可以向导航控制器的范围添加一个功能，该功能检查$ state服务的当前状态/路由，以查看您正在寻找的路线当前是否处于活动状态。

即使您没有使用ui-router，我的建议是提供一项服务，告诉您的应用程序您当前的路线是什么，并使用类似

的内容

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

其中$scope.isStateActive(stateName)是导航控制器范围内的函数，用于确定（无论是使用ui-router的$ state服务还是本地服务，如果我们当前处于'home'状态且$scope.goToState(stateName)是一个启动状态转换的函数

Answer 2

你弄乱了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）

2 个答案: