使用AngularJS设置活动选项卡的样式

17 浏览
0 Comments

使用AngularJS设置活动选项卡的样式

我在AngularJS中设置了路由，如下所示：\n

$routeProvider
    .when('/dashboard', {templateUrl:'partials/dashboard', controller:widgetsController})
    .when('/lab', {templateUrl:'partials/lab', controller:widgetsController})

\n我在顶部栏上有一些链接，样式为标签页。根据当前模板或URL，如何将“active”类添加到标签页中？

0

3 答案

0 Comments

使用AngularJS设置活动选项卡样式的原因是为了根据当前路径设置选项卡的活动状态。解决方法是创建一个自定义指令，监听$routeChangeSuccess事件，在事件触发时根据当前路径和选项卡的href属性进行比较，如果相同则添加active类，否则移除active类。

具体代码如下：

app.directive('detectActiveTab', function ($location) {
  return {
    link: function postLink(scope, element, attrs) {
      scope.$on("$routeChangeSuccess", function (event, current, previous) {
        var pathLevel = attrs.detectActiveTab || 1;
        var pathToCheck = $location.path().split('/')[pathLevel] || "current $location.path doesn't reach this level";
        var tabLink = attrs.href.split('/')[pathLevel] || "href doesn't include this level";
        if (pathToCheck === tabLink) {
          element.addClass("active");
        } else {
          element.removeClass("active");
        }
      });
    }
  };
});

使用时，在选项卡的a标签上添加detect-active-tab属性，并传入对应的路径级别参数。例如：

  • 
  HOME

    •

    这样就可以根据当前路径设置选项卡的活动状态了。

    0
    0 Comments

    问题的出现的原因是希望在AngularJS中设置活动标签的样式，即在当前标签上添加一个active类。解决方法是使用ngClass指令和$location服务。在模板中，可以使用ng-class指令来判断当前标签是否为活动标签，并添加active类。isActive函数是一个在作用域中定义的函数，用于判断给定的路由是否与当前路径相匹配。在控制器中，定义了一个名为MyCtrl的控制器，并注入了$scope和$location服务。在isActive函数中，通过比较给定的路由和$location.path()的值来判断是否为活动标签。如果相等，则返回true，否则返回false。为了方便使用，可以将这个逻辑封装成一个简单的指令。在jsFiddle中提供了一个完整的示例，可以通过点击选项来设置当前页面的活动状态。但是如果希望在页面加载时设置当前页面的活动状态，需要进行额外的处理。最后，有用户提到了这个问题，并得到了解答和感谢。

    0
    0 Comments

    在AngularJS中设置活动选项卡的样式

    在$routeProvider配置期间，一种解决方法是为每个部分添加自定义属性，如下所示：

    $routeProvider.
    when('/dashboard', {
        templateUrl: 'partials/dashboard.html',
        controller: widgetsController,
        activetab: 'dashboard'
    }).
    when('/lab', {
        templateUrl: 'partials/lab.html',
        controller: widgetsController,
        activetab: 'lab'
    });

    在控制器中公开$route：

    function widgetsController($scope, $route) {
    $scope.$route = $route;
}

    根据当前活动选项卡设置active类：

  • 

  •

    这是我目前看到的最好的解决方法，因为它支持像/foo/:bar这样的动态URL。

    实际上，我还无法使其正常工作。你能提供一个plnkr吗？

    只有一点要注意：最好设置$scope.activeTab = $route.current.activetab，这样可以使HTML代码更加简洁。

    这在AngularJS 1.0.8中不起作用。$route.current无定义。

    我放了一个JSFiddle上：[jsfiddle.net/hoeferh/gUPgn](http://jsfiddle.net/hoeferh/gUPgn) - 但是我无法使Christoph的改进工作，因为默认重定向之前当前路由是未定义的。

    与's的$rootScope技巧结合使用，使其在所有作用域中可用。

    使用ui-router的代码，在最后一个版本中，指令ui-sref-active存在。不需要编写自己的指令。

    我自己发明了相同的解决方案:)当然，我认为这是最好的解决方案，哈哈。在控制器代码的初始化过程中，$route.current确实可能未定义。但是稍后它会变得可用。这就是为什么你不能在控制器代码中分配$scope.activeTab = $route.current.activeTab。但是你可以将$route导出到$scope，并在html中使用$route.current.activeTab。

    Juurlink，像这样添加自定义属性是否合法？还是更好地添加像[github.com/angular-ui/ui-router/wiki#attach-custom-data-to-state-objects](github.com/angular-ui/ui-router/...)这样的数据对象？

    这是一个很好的解决方法，但是angular检查"=="操作太多次，所以可能不够优雅。

    ...你只为所有三个部分使用了一个控制器...你能展示如何为每个部分使用单独的控制器吗？

    我将我的$route暴露在$rootScope上，因为某些路由没有控制器，然后我在应用程序配置中添加了运行函数，这是完整的代码：

    angular.module("myApp", ['AService', 'ngRoute'])
    .config(['$routeProvider', function($routeProvider){
        //我的路由配置
    }])
    .run(function($route, $rootScope){
        $rootScope.$route = $route;
    });

    0