mdNavBar不会从URL与角1.6和UI路由器1.0.0更新RC.1(mdNavBar does

我使用的是1.6角和UI路由器1.0.0-RC.1。我设置了几个简单的状态：

.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：

<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>

当我点击“富”，它带我到http://example.com/example/#!/foo ，当我点击“酒吧”，它带我去http://example.com/example/#!/bar 。

但是，当我手动输入网址http://example.com/example/#!/foo ，没有选择美孚导航项目，即使它已经被选中。另外，如果我输入网址http://example.com/example/#!/bar ，没有选择栏导航项目，即使状态明显改变为“栏”（根据我的嵌入式组件。

为什么不按当前的UI路由器状态mdNavBar？

Answer 1:

编辑：适应于UI路由器1.0.0-RC1版本。 Plunker avaibale 这里

我想你可以解决它保持md-selected-nav-item在UI路由器状态数据。

在将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'/>"
});

在你的主控制器（在同一个控制器构造函数），每次状态改变时更新selectedItem属性。你可以做到这一点看事件$transitions.onSuccess 。例：

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

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

在你的主HTML页面，结合md-selected-nav-item的范围将selectedItem变量。

<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-标签同样的问题，这wordked我。我相信它应该为MD-导航栏工作得很好了。

希望能帮助到你。

Answer 2:

它可以通过对MD-导航栏的属性MD-选择-NAV项目设定值预先选择的导航项目。值应该是相同的MD-NAV项目名称属性。

<md-nav-bar md-selected-nav-item="$ctrl.currentNavItem" nav-bar-aria-label="navigation links">
    <md-nav-item ng-repeat="page in $ctrl.pages" md-nav-sref="{{page.state}}" name="{{page.name}}">{{page.label}}</md-nav-item>
</md-nav-bar>

控制器应将该值设置为预期。把它包在一些通知有关变化的角度消化周期（$超时在我的情况）

panelController = (_, $timeout, $state, Routes) ->
  @pages = [
    state: Routes.tooltips
    name: 'tooltips'
    label: 'Helpers'
  ,
    state: Routes.events
    name: 'events'
    label: 'Events'
  ,
    state: Routes.users
    name: 'users'
    label: 'Users'
  ]

  $timeout =>
    @currentNavItem = _.find(@pages, state: $state.current.name).name

  return this

文章来源: mdNavBar doesn't update from URL with Angular 1.6 and ui-router 1.0.0-rc.1