Question

我想知道如何处理角度点击link-ss-1或link-ss-2时，Link-C也是＆＃34; Current＆＃34;。

我使用ui -router获取信息。

我的例子：http://plnkr.co/edit/R5qdRKp6t198MQFjeUYy?p=preview

我想：

链接A
Link B
链接C （ - ＆gt;如果ss-link-1或ss-link-2具有类actif，则添加Actif类）
- ss-Link 1
- ss-Link 2 （通过ui-router启用ui-sref-ac的Actif）

提前感谢您的回答！

这里是js代码：

(function() {
  "use strict"
  var app = angular.module("plunker", ["ui.router"]);

  app.config(["$stateProvider", "$urlRouterProvider",
    function($stateProvider, $urlRouterProvider) {
      $urlRouterProvider.otherwise("/");
      $stateProvider
        .state("linkA", {
          url: "/",
          templateUrl: "content-A.html"
        })
        .state("linkB", {
          url: "/link-B",
          templateUrl: "content-B.html"
         })
        .state("linkC", {
          url: "/link-C",
          templateUrl: "content-C.html"
          })
        .state("ssLink1", {
          url: "/ssLink-1",
          templateUrl: "content-C-1.html"
        })
        .state("ssLink2", {
          url: "/ssLink-2",
          templateUrl: "content-C-2.html"
        })
    }
  ]);

}());

这是HTML：

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link href="style.css" rel="stylesheet" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.js" data-require="angular.js@1.3.x"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>

  <script src="app.js"></script>

</head>

<body>
  <nav>
    <div class="menu">
      <ul>
        <li><a ui-sref="linkA" ui-sref-active="current">link A</a></li> 
        <li><a ui-sref="linkB" ui-sref-active="current">link B</a></li> 
        <li><a ui-sref="linkC" ui-sref-active="current">link C</a>
            <ul>
              <li><a ui-sref="ssLink1" ui-sref-active="current">ss-link1</a></li>
              <li><a ui-sref="ssLink2" ui-sref-active="current">ss-link2</a></li>
            </ul>
        </li> 


      </ul>
    </div>
</nav>
  <div class="container">
    <div ui-view></div>
  </div>
</body>

</html>

Answer 1

您可以使用ui-router上的子视图执行此操作，它开箱即用： https://github.com/angular-ui/ui-router/issues/818

如果您不想使用子视图，可以通过添加controller并在$state上公开$scope来执行此操作，以便您可以测试当前状态和将当前类添加到您的链接：

  app.controller('navCtrl', ['$scope', '$state', function($scope, $state) {
   $scope.$state = $state;
  }]);

将您的ui-router设置更改为：

  app.config(["$stateProvider", "$urlRouterProvider",
    function($stateProvider, $urlRouterProvider) {
      $urlRouterProvider.otherwise("/");
      $stateProvider
        .state("linkA", {
          url: "/",
          templateUrl: "content-A.html"
        })
        .state("linkB", {
          url: "/link-B",
          templateUrl: "content-B.html"
         })
        .state("linkC", {
          url: "/link-C",
          templateUrl: "content-C.html"
          })
        .state("linkC-ssLink1", {
          url: "/ssLink-1",
          templateUrl: "content-C-1.html"
        })
        .state("linkC-ssLink2", {
          url: "/ssLink-2",
          templateUrl: "content-C-2.html"
        })
    }
  ]);

你的html：

  <nav ng-controller="navCtrl">
    <div class="menu">
      <ul>
        <li><a ui-sref="linkA" ui-sref-active="current">link A</a></li> 
        <li><a ui-sref="linkB" ui-sref-active="current">link B</a></li> 
        <li><a ui-sref="linkC" ng-class="{current:  $state.current.name.includes('linkC')}">link C</a>
            <ul>
              <li><a ui-sref="linkC-ssLink1" ui-sref-active="current">ss-link1</a></li>
              <li><a ui-sref="linkC-ssLink2" ui-sref-active="current">ss-link2</a></li>
            </ul>
        </li> 


      </ul>
    </div>
</nav>

这是一个工作的plunker所以你可以检查出来： http://plnkr.co/edit/3vWUwe96addTxNduowpv?p=preview

如何使用angular ui -router添加当前类的链接

1 个答案: