UI-Router StateChange 但视图 UI 不刷新

Question

我正在使用 UI-Router 加载带有新表单的视图，或编辑现有表单。

新表单的 url 为：#/dashboard/form/someFormType

可编辑表单的 url 为：#/dashboard/form/someFormType/edit/instanceid

路由状态的设置如下所示，抽象状态解析两个子状态使用的条目，然后解析自己的条目。

.state('dashboard.form', {
    url: "/form/:formType",
    abstract: true,
    controller: 'FormController',
    controllerAs: 'formCtrl',
    templateUrl: '/app/dashboard/views/form.html',
    resolve: { ... }
})

.state('dashboard.form.create', {
    url: "",
    resolve: { ... }
})

.state('dashboard.form.edit', {
    url: "/edit/:formPackageInstanceId",
    resolve: { ... }
})

如果我开始在dashboard.edit.form 中编辑现有表单，然后决定在中途创建一个新表单并单击具有dashboard.form 的ui-sref 的导航栏。从仪表板创建url 更改。 form.edit 到dashboard.form.create，dashboard.form.create 中的resolves 已经解决了，但是UI 从不刷新，所以表单输入值是我之前编辑的表单的值...

有什么建议吗？

更新

在一些帮助下，我找到了一些记录路由问题的代码：

// Add state change hooks to log issues to console
.run(function($rootScope, $state, $urlMatcherFactory) {
    $rootScope.$state = $state;
    function message(to, toP, from, fromP) { return from.name  + angular.toJson(fromP) + " -> " + to.name + angular.toJson(toP); }
    $rootScope.$on("$stateChangeStart", function(evt, to, toP, from, fromP) { console.log("Start:   " + message(to, toP, from, fromP)); });
    $rootScope.$on("$stateChangeSuccess", function(evt, to, toP, from, fromP) { console.log("Success: " + message(to, toP, from, fromP)); });
    $rootScope.$on("$stateChangeError", function(evt, to, toP, from, fromP, err) { console.log("Error:   " + message(to, toP, from, fromP), err); });
});

它没有通过任何错误，并记录状态更改的开始和成功完成：

Start:   dashboard.form.edit{"formPackageType":"corporation","formPackageInstanceId":"574"} -> dashboard.form.create{"formPackageType":"corporation"}
Success: dashboard.form.edit{"formPackageType":"corporation","formPackageInstanceId":"574"} -> dashboard.form.create{"formPackageType":"corporation"} 

Answer 1

您的表单模板位于父状态。当您从一个子状态转到另一个子状态时，它们的父状态不会重新加载（或者，更准确地说，当您从一个状态到另一个状态时，它们的共同祖先都不会重新加载）。

但是，这并不意味着您无法清除子状态更改的表单。您可以执行以下操作之一：

1. 将模板移至子状态，使其在每次状态更改时完全重新构建。注意在父状态中使用“普通容器”模板（），以便子状态模板有一个可以渲染的地方。
2. 将您的数据放入父范围。子状态可以访问它，因此您可以手动编辑子状态控制器构造的数据。 （注意不要overwrite parent scope properties。）

（我已经编辑了答案以包含下面讨论的要点。）