文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使用角ui -router向当前类添加链接

问如何使用角ui -router向当前类添加链接
EN

Stack Overflow用户

提问于 2015-10-15 20:10:42

回答 1查看 1.3K关注 0票数 0

我想知道如何处理当角点击链接-ss-1或链接-ss-2，链接-C也是“当前”。

我使用ui -router来获取信息。

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

我想：

环节A
链接B
链接C(->添加Actif类，如果ss- Link -1或ss-link-2有类actif)
- ss-链接1
- ss-Link 2 (is sref active by ui-)

提前感谢您的回答！

以下是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>

angularjs

angular-ui-router

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-10-15 20:30:44

您可以使用ui-router上的子视图来完成该操作，它可以立即运行：https://github.com/angular-ui/ui-router/issues/818。

如果不想使用子视图，可以通过添加controller并在$scope上公开$state来实现这一点，因此可以测试当前状态并将当前类添加到链接中：

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

将ui-路由器设置更改为：

  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>

下面是一个工作柱塞，您可以查看它：http://plnkr.co/edit/3vWUwe96addTxNduowpv?p=preview

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/33157651

复制

相似问题

问如何使用角ui -router向当前类添加链接
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用角ui -router向当前类添加链接EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用角ui -router向当前类添加链接
EN