活动链接/在AngularUI路由器标签 [英] Active link/tab in AngularUI Router

问题描述

我使用 AngularUI路由器而我试图嵌套/儿童联系。

I'm using AngularUI Router and I'm trying to have nested/children links.

所有工作正常，但我怎么选择在联系卡/活动链接？

All works fine but how do I have selected/active link in Contact tab?

基本上，我需要能够加载联系页面时选择/主动接触的一环。目前，它不读出于某种原因， controlleroneCtrl 除非我点击链接联系人之一。

Basically, I need to be able to have selected/active contact one link when the Contact page is loaded. Currently it does not read for some reason the controlleroneCtrl unless I click on the link contact one.

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

推荐答案

我用暴露状态根范围和使用的模式状态.current.name 模板。我辩解这一全球性曝光，因为它是一个应用程序级的关注。如果您的导航指令有隔离范围，你就需要通过它，但是这根本不算什么。

I use the pattern of exposing state on the root scope and using state.current.name in templates. I justify this global exposure because it's an app-level concern. If your navigation directive has isolate scope you'll need to pass it in, but that's no biggie.

在实践中它已经对我们非常好，我想。

In practice it's been very good for us I think.

是这样的：

JavaScript的

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>

这篇关于活动链接/在AngularUI路由器标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！