Question

我正在使用AngularUI Router而我正在尝试使用嵌套/子链接。

一切正常，但我如何在联系人标签中选择/活动链接？

基本上，我需要能够在加载联系页面时选择/主动联系一个链接。目前，由于某些原因，controlleroneCtrl不会读取，除非我点击链接联系人。

angular
    .module ('myApp', ['ui.router'
  ])
    .config (['$urlRouterProvider', '$stateProvider',  function ($urlRouterProvider, $stateProvider) {
        $urlRouterProvider.otherwise ('/summary');

        $stateProvider.
            state ('summary', {
            url: '/summary',
            templateUrl: 'summary.html',
            controller: 'summaryCtrl'
          }).
            state ('about', {
            url: '/about',
            templateUrl: 'about.html',
            controller: 'aboutCtrl'
          }).
            state ('contact', {
            url: '/contact',
            templateUrl: 'contact.html',
            controller: 'contactoneCtrl'
          })
            // Sub page
            .state('contact.one',{
            url: '/contact.contactone',
            templateUrl: 'one.html',
            controller: 'contactoneCtrl'
          })
            // Sub page
            .state('contact.two',{
            url: '/contact.contacttwo',
            templateUrl: 'two.html',
            controller: 'contacttwoCtrl'
          });

      }]);

Plunker：http://plnkr.co/edit/DWjp5M6kJt2MyBrasfaQ?p=preview

Answer 1

有一种更快的方法可以做到这一点。只需使用ui-sref-active="active"属性而不是ui-sref。

一个例子：

<ul>
    <li ui-sref-active="active">
        <a ui-sref="state">State 1</a>
    <li>
<ul>

当状态处于活动状态时，列表项会使该类处于活动状态。如果您想要一个不同的类用于活动状态或多个类，只需按如下所示添加它

<ul>
    <li ui-sref-active="active so-active super-active">
        <a ui-sref="state">State 1</a>
    <li>
<ul>

Answer 2

我使用在根范围上公开state并在模板中使用state.current.name的模式。我证明这种全球曝光是合理的，因为它是应用程序级别的关注点。如果您的导航指令具有隔离范围，则您需要将其传入，但这并不重要。

在实践中，我认为它对我们来说非常好。

看起来像这样：

的javascript

app = angular.module ('myApp', ['ui.router']);
app.controller('MainController', function($scope, $state){
  $scope.state = $state;
});

HTML：

<nav>
  <ul>
    <li ng-repeat="tab in tabs" ng-class="{active: state.current.name === tab.id}>{{tab.name}}</li>
  </ul>
</nav>

Answer 3

这是更新的plunk - http://plnkr.co/edit/UjjNm4JJIsjb4ydWZRDi?p=preview

<强>更改

添加了新的控制器contactCtrl
在$state.go('contact.contactone');

contactCtrl

更新了app.js，以便/contact指向contactCtrl

Answer 4

我这样使用ng-class：

ng-class="{active: state.current.name.split('.')[1] === 'homepage'}"

我的"state"名称的结构如下：

app
app.homepage
app.profile
app.profile.user
.etc

例如，在我的主页上，它的按钮变为如下：

<li ng-class="{active: state.current.name.split('.')[1] === 'homepage'}"><a ui-sref="app.homepage">Home</a></li>

因此，只需在应用控制器的根目录中定义$state @Simple As Could Be的范围即可，并且您可以将ng-class用于应用的状态以及应用的深度＃39; s状态嵌套。

Answer 5

请参阅我的插件http://embed.plnkr.co/bRfl1S9KXQuvL0Bvt9jD/preview。

还尝试将ui-router的版本更新为0.2.12。

仅实施了客户端标签。

Angular UI Router中的活动链接/选项卡

5 个答案: