mdNavBar 不会从带有 Angular 1.6 和 ui-router 1.0.0-rc.1 的 URL 更新

问题描述

我使用的是 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 导航项已被选中，也未选中.此外，如果我输入 URL http://example.com/example/#!/bar，即使状态明显更改为bar"(基于我的嵌入式组件.

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?

推荐答案

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

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

1. 将 selectedItem 添加到每个 ui-router 状态数据中.像这样:

$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 更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！