如何使 Angular ui-router 的父状态在状态更改时始终执行控制器代码？答案

【问题标题】：How to make angular ui-router's parent state always execute controller code when state changes?如何使 Angular ui-router 的父状态在状态更改时始终执行控制器代码？
【发布时间】：2014-02-20 20:03:34
【问题描述】：

假设我们在 $stateProvider 中定义了一个父子关系，如下所示：

    .state('myProfile', {
        url: "/my/profile",
        templateUrl: 'my/profile.html',
        controller: 'MyProfileController'
    }).state('myProfile.edit', {
        url: "/edit",
        templateUrl: 'my/profile.edit.html',
        controller: 'EditMyProfileController'
    });

这里的想法是父 myProfile 状态是不可编辑的，但子 myProfile.edit 状态是编辑配置文件的实际表单。让我们忽略个人资料页面是否应该这样工作 - 我只是在玩弄东西和学习。

当用户提交表单时，我使用 $state 对象返回到父页面：

$scope.save = function() {
    userResource.update($scope.user, function() {
        SessionService.refresh();

        $state.go('myProfile'); // also tried with reload: true as well
    });
}

在用户保存配置文件数据后 - 已正确保存 - 除非我按 F5 并刷新浏览器，否则父级视图不会更新。

我注意到的一件事是，如果我将子 myProfile.edit 状态设置为父状态而不是 myProfile 状态的子状态，则此问题实际上会消失并且事情会按预期运行（尽管布局看起来像这样不好）。

似乎 UI Router 可能正在缓存父级的结果，不知道模型中的事情发生了变化并且需要重新运行控制器？

如何保持父子关系，同时仍然让父 myProfile 页面始终执行其控制器以重新加载其数据？基本上，我希望在使用$state 或单击指向myProfile 的链接时发生这种情况。我该怎么做？

如果我不能按照我的要求做，那么我知道我可以设置一堆子状态并让它们按预期工作......但是，我如何为父级设置默认子状态？例如，假设我希望 myProfile.edit 成为 myProfile 的默认子状态 - 我该怎么做？

谢谢！

【问题讨论】：

标签： javascript angularjs state angular-ui angular-ui-router

【解决方案1】：

似乎 $state.go 上有一个错误，它忽略了重新加载选项。但是，$state.transitionTo 对我有用。

$state.transitionTo('state',null,{reload: true});

【讨论】：

【解决方案2】：

要在从子状态导航到父状态时强制重新加载父状态，您可以使用以下两种方式。纯js或者指令属性。

<a ui-sref="myProfile" ui-sref-opts="{ reload: true }">Back to My Profile</a>

或

$state.go('myProfile', null, { reload: true });

【讨论】：

这很有帮助，但在我的情况下，我有 href，因为它们来自 CMS。在这种情况下，我不知道如何将 reload 设置为 true。
我也有同样的问题。我也来自第 3 方系统。
如果用户在浏览器中使用后退按钮，如何设置 reload: true？

【解决方案3】：

您是否尝试过监听“$stateChangeStart”事件和/或使用 $state.reload() ？

【讨论】：