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.1mdNavBar 不会从 Angular 1.6 和 ui-router 1.0.0-rc.1 的 URL 更新
【发布时间】：2017-04-18 15:38:12
【问题描述】：

我正在使用 Angular 1.6 和 ui-router 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>

当我点击“Foo”时，它会将我带到http://example.com/example/#!/foo，当我点击“Bar”时，它会将我带到http://example.com/example/#!/bar。

但是当我手动输入 URL http://example.com/example/#!/foo 时，Foo nav-item 没有被选中，即使它已经被选中了。此外，如果我输入 URL http://example.com/example/#!/bar，则不会选择 Bar 导航项，即使状态明显更改为“bar”（基于我的嵌入式组件。

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

【问题讨论】：

标签： angularjs angular-ui-router angular-material

【解决方案1】：

EDIT：适配 ui-router 1.0.0-rc1 版本。 Plunker 可用here

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

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

在您的主控制器中（在同一个控制器构造函数中），每次更改状态时更新 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-tabs 时遇到了同样的问题，这对我来说很有意义。我相信它也应该适用于 md-nav-bar。

希望对你有帮助。

【讨论】：

去过那里，试过了。 $stateChangeSuccess 现在默认已弃用和禁用。 ui-router.github.io/guide/ng1/… 。请指出在哪里我将事件监听代码放在控制器“构造函数”方法中？在$onInit()?请提供使用最新（指定）版本的经过测试的解决方案。谢谢。
关于事件监听的放置位置，您可以在控制器构造函数中进行。另一方面，你是绝对正确的： $stateChangeSuccess 已被弃用......我还没有升级到 1.0 并且不知道这一点。我会尝试提供一个最新版本的示例，应该不难。
“……应该不难。” @troig 著名的遗言。 ;) 这就是我的想法。
@GarretWilson 哈哈哈！坏话 ;) 我尝试使用 ui-router 1.0 进行尝试（答案已更新，基本上是第 2 点）。你能检查我的编辑，让我知道你的想法。希望它有帮助
这太棒了。您对反馈的回答和回应是在 Stack Overflow 上应如何回答问题的模型。您不仅帮助我解决了这个问题，还帮助我解决了另一个问题；见stackoverflow.com/a/43553641/421049。我最大的问题是$transition 对我来说是全新的，我不知道从哪里开始。在您的帮助和示例下，我能够跳入文档。请注意，如果您想匹配所有转换（根据文档），您可以简单地使用{}，如$transitions.onSuccess({}, function(trans) {…});。谢谢！

【解决方案2】：

可以通过在 md-nav-bar 上设置属性 md-selected-nav-item 的值来预先选择导航项。值应与 md-nav-item 名称属性相同。

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

控制器应将值设置为预期值。将其包装在一些东西中以通知角度摘要周期有关更改（在我的情况下为 $timeout）

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

【讨论】：