Question

我的导航栏应该位于几乎每个页面的顶部（但不是全部），所以我试图使用ui-view为某些页面加载它，但是我被卡住了。

我要做的是将我的导航栏附加到主要状态（例如contacts，about）及其子状态（contacts.list，contacts.detail等），但如果我这样做，导航注入他们的主div，所以它变小，所以我需要直接将它附加到index.html。

我复制了ui-router的演示应用程序，创建了一个名为navbar的ui-view，从index.html中删除了导航部分并创建了navbar.html。

这是我的插件：http://plnkr.co/edit/i0DuDcocH04TZadim2Oo

Answer 1

我无法加载你的plunkr，但我已经做了类似的事情。

如果您想使用与其他部分无关的导航栏，则需要对主页的每个部分使用视图（例如：header / content / foooter）。

为此你可以得到这样的索引：

<body>
    <section>
         <div ui-view="header"/>
    </section>
    <section>
         <div ui-view="content"/>
    </section>
</body>

然后定义你的主要状态

$state.state('home', {
    url:'/'
    views:{
        'header':{
             templateUrl:'navbar.html',
             controller:'navbarController'
         },
         'content':{
             templateUrl:'content.html'
             controller:'contentController'
         }
    }
});

在您的导航栏模板中，您现在拥有一个专用模板和控制器，因此您可以随意使用它。

如果您需要侦听更改事件，例如：

$rootScope.$on('$stateChangeStart',
function(event, toState, toParams, fromState, fromParams){
    event.preventDefault();
    // transitionTo() promise will be rejected with
    // a 'transition prevented' error
})

来自：http://angular-ui.github.io/ui-router/site/#/api/ui.router.state。$ state

$ rootScope是正常的，事件只能通过$ rootScope广播。

如果您需要在视图之间传递数据，则必须在$ rootScope中存储变量。我搜索了其他方法来做到这一点，但它只是为了更简单，足以使用$ rootScope。

如果你想在一些州（或孩子）活跃时添加一些类，你可以使用指令ui-sref-active：http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.directive:ui-sref-active。指令ui-sref-active-eq用于严格平等。

使用视图时，如果您不想在完整视图中使用应用程序，而只是使用模板和控制器的正常状态，则会遇到使用subState的问题。最好的方法是让一个中间状态具有如下定义的视图：

views:{
    '@':{
         template:'<div ui-view/>'
    }
}

然后，您可以在不使用视图的情况下正常定义此状态的子项。

虽然我真的可以说如果你没有加载你的plunkr就是你正在寻找的东西，我希望这会对你有帮助。

Answer 2

我会有两组嵌套状态。对于main.xx组，您将注入导航栏并从那里创建嵌套状态。然后每个非导航部分将具有它自己的一组状态。 Here就是一个例子。

Angular ui-router：创建一个自动注入所有主要状态及其子状态的导航栏

2 个答案: