mdNavBar不会从使用Angular 1.6和ui-router 1.0.0-rc.1的URL更新 [英] mdNavBar doesn't update from URL with Angular 1.6 and ui-router 1.0.0-rc.1

问题描述

我正在使用Angular 1.6和ui-router 1.0.0-rc.1.我建立了两个简单的状态:

I'm using Angular 1.6 and ui-router 1.0.0-rc.1. I set up a couple of simple states:

.config(function($stateProvider) {
    $stateProvider.state({
        name: "foo",
        url: "/foo",
        template: "<foo-widget layout='row'/>"
    });

    $stateProvider.state({
        name: "bar",
        url: "/bar",
        template: "<bar-widget layout='row'/>"
    });

    $stateProvider.state({
        name: "home",
        url: "",
        template: "<foo-widget layout='row'/>"
    });

然后在主页上放置一个mdNavBar:

Then on the main page I put an mdNavBar:

<md-nav-bar nav-bar-aria-label="navigation links" md-selected-nav-item="foo">
    <md-nav-item name="foo" md-nav-sref="foo">Foo</md-nav-item>
    <md-nav-item name="bar" md-nav-sref="bar">Bar</md-nav-item>
</md-nav-bar>

当我单击"Foo"时，它将带我到http://example.com/example/#!/foo，而当我单击"Bar"时，它将带我到http://example.com/example/#!/bar.

When I click on "Foo" it takes me to http://example.com/example/#!/foo, and when I click on "Bar" it takes me to http://example.com/example/#!/bar.

但是当我手动输入URL http://example.com/example/#!/foo时，即使已经选择了Foo nav-item，也没有选择.同样，如果我输入URL http://example.com/example/#!/bar，即使状态显然更改为"bar"(基于我的嵌入式组件)，也不会选择Bar nav-item.

But when I manually enter the URL http://example.com/example/#!/foo, the Foo nav-item is not selected, even if it was already selected. Also if I enter the URL http://example.com/example/#!/bar, the Bar nav-item is not selected, even though the state apparently changes to "bar" (based upon my embedded components.

为什么mdNavBar不跟随当前的ui-router状态?

Why isn't the mdNavBar following the current ui-router state?

推荐答案

EDIT :适用于ui-router 1.0.0-rc1版本. Plunker avaibale 此处

我认为您可以解决，将md-selected-nav-item保留在ui路由器状态数据中.

I think you could solve it keeping the md-selected-nav-item in the ui-router state data.

1. 将selectedItem添加到每个ui路由器状态数据.像这样:

---

$stateProvider.state({
    name: "foo",
    url: "/foo",
    data: {
      'selectedItem': 'foo'
    },      
    template: "<foo-widget layout='row'/>"
});

$stateProvider.state({
    name: "bar",
    url: "/bar",
    data: {
      'selectedItem': 'bar'
    },              
    template: "<bar-widget layout='row'/>"
});

1. 在主控制器中(在同一控制器构造函数中)，每次状态更改时都更新selectedItem.您可以观看事件$transitions.onSuccess来执行此操作.示例:

1. In your main controller (in the same controller constructor), update the selectedItem every time the state is changed. You can do it watching the event $transitions.onSuccess. Example:

---

myApp.controller('HelloWorldCtrl', function($scope, $transitions) {
  $scope.selectedItem = "";

  $transitions.onSuccess({}, function(trans) {
    $scope.selectedItem = trans.to().data.selectedItem;
  });
});

1. 在您的html主页中，将md-selected-nav-item绑定到作用域selectedItem变量.

1. In your main html page, bind md-selected-nav-item to the scope selectedItem variable.

---

<md-nav-bar nav-bar-aria-label="navigation links" md-selected-nav-item="selectedItem">
    <md-nav-item name="foo" md-nav-sref="foo">Foo</md-nav-item>
    <md-nav-item name="bar" md-nav-sref="bar">Bar</md-nav-item>
</md-nav-bar>   

我在使用md-tabs时遇到了同样的问题，这对我来说是个恶作剧.我相信它对于md-nav-bar也应该很好用.

I was facing with the same problem with md-tabs, and this wordked for me. I believe it should work pretty well for md-nav-bar too.

希望有帮助.

这篇关于mdNavBar不会从使用Angular 1.6和ui-router 1.0.0-rc.1的URL更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！