【问题标题】:Force reload route/state on link click在链接单击时强制重新加载路由/状态
【发布时间】:2016-01-31 06:41:44
【问题描述】:

目前我正在做这样的事情

link.on('click', function () {
    if (link.attr('href') !== $route.current.originalPath)
        return;
    $route.reload();
});

我不知道副作用,但我想可能会有一些。

在 ngRoute 中是否有更直接的方法来处理这个问题,例如通过$location?

当应用程序更新以使用它时,在 UI Router 中执行相同操作的方法是什么?

【问题讨论】:

    标签: angularjs angular-ui-router single-page-application angularjs-routing ngroute


    【解决方案1】:

    对于 UI-Router,我们有一组选项,其中一个是 {reload: true}

    go(to, params, options)

    • location - {boolean=true|string=} - 如果为 true 将更新地址栏中的 url,如果为 false 则不会。如果是字符串,必须是“替换”, 这将更新 url 并替换最后的历史记录。
    • inherit - {boolean=true},如果为true,将从当前url继承url参数。
    • relative - {object=$state.$current},当使用相对路径(例如'^')进行转换时,定义从哪个相对状态开始。
    • notify - {boolean=true},如果为 true 将广播 $stateChangeStart 和 $stateChangeSuccess 事件。
    • reload (v0.2.5) - {boolean=false}, 如果为 true 将强制转换,即使状态或参数没有改变,也就是重新加载相同 状态。它与 reloadOnSearch 不同,因为你会在你 想要在一切都相同时强制重新加载,包括搜索 参数。

    所以我们可以强制状态重新加载:

    $state.go("stateName", stateParams, {reload: true});
    

    【讨论】:

    • 没有机会拥抱 0.2.5,太美了。
    【解决方案2】:

    您的代码可以转换为以下更改 $route.reload()$state.reload()

    代码

    link.on('click', function () {
        if (link.attr('href') !== $route.current.originalPath)
            return;
        //though this will not reload the controller content
        $state.reload(); //will force to reload state..
        $scope.$apply(); //needed here to tell angular js to run digest cycle.
    });
    

    git-hub issue 看来$state.reload() 重新加载状态,但控制器没有重新实例化。为此,您需要使用以下代码而不是 $state.reload()

    $state.transitionTo('tab.locations', $state.$current.params, { 
      reload: true, inherit: true, notify: true 
    });
    

    【讨论】:

    • 说得好,我相信我在原始代码中做了$apply(),当然,这里有必要。
    • @estus yes..thats neccesary..any angular code called externally(out of angular context) 需要告诉 Angular 更新这些更改(以反映绑定。)
    【解决方案3】:

    我发现这是 UI-router 的最短路径:

    $state.go($state.current, {}, {reload: true});
    

    或者你可以这样做:

    $state.transitionTo($state.current, $stateParams, {
           reload: true,
           inherit: false,
           notify: true
         });
    

    【讨论】:

      【解决方案4】:

      如果您使用的是 Ui.Router

      link.on('click', function (event) {
          if (link.attr('href') !== $route.current.originalPath)
              return;
        
          event.preventDefault();
          
          return $scope.$apply(function() {
            return $state.reload(); // $state.go($state.current.name, $stateParams, { inherit: false, reload: true, notify: true });
          });
      });

      如果您使用简单的 ngRoute,则必须从 templateCache 中删除 currentTemplate 并在 $timout 中返回 $route.reload()!

      【讨论】:

      • 关于 UI 路由器部分,我看不出这是如何补充现有答案的。对于 ngRoute,一些解释可能是有益的,我不确定破坏模板缓存是否有帮助。
      • 在您的示例中,如果事件附加在链接对象上,则不需要执行 event.preventDefault。相反,对于 ngRoute,这是一个已知问题......所以,如果你想强制重新加载路由,你必须从 templateCache 中删除 current-route-template
      • e.preventDefault is done by $location,这就是为什么它不在原始 sn-p 中的原因。我不确定弄乱templateCache会改变什么,如果是真的,请提供一个plunker。
      • 试试你的应用程序,如果不行,你可以投票给我!
      猜你喜欢
      • 2020-02-05
      • 1970-01-01
      • 2012-08-05
      • 2015-12-22
      • 1970-01-01
      • 1970-01-01
      • 2017-05-12
      • 2014-02-11
      • 1970-01-01
      相关资源
      最近更新 更多