UI-路由器状态改变但视图UI不刷新

I'm using UI-Router to either load a view with a new form, or edit an existing form.

我使用UI-Router来加载具有新表单的视图，或者编辑现有表单。

A new form has a url of: #/dashboard/form/someFormType

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

A editable form has a url of: #/dashboard/form/someFormType/edit/instanceid

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

The route states are set up like below, with a abstract state that resolves entries used by both child states, which then resolve their own entries.

路由状态设置如下，有一个抽象的状态，可以解析两个子状态使用的条目，然后解析它们自己的条目。

.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: { ... }
})

If I begin editing an existing form in dashboard.edit.form, and then decide I want to create a new form midway and click the navbar which has a ui-sref for dashboard.form.create the url changes from dashboard.form.edit to dashboard.form.create, the resolves in dashboard.form.create are resolved, but the UI never refreshes, so the form input values are that of the form I was previously editing...

如果我开始在dashboard.edit中编辑一个现有的窗体。表单，然后决定我要在中途创建一个新表单，然后单击navbar，其中包含dashboard.form的ui-sref。从dashboard.form创建url更改。编辑dashboard.form。创建，在dashboard.form中解析。创建被解析，但是UI永远不会刷新，所以表单输入值是我以前编辑的表单的表单。

Any suggestions?

有什么建议吗?

Update

更新

With some help I found some code that logs route issues:

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

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

It doesn't through any errors, and logs a start and successful completion of state change:

没有出现任何错误，记录状态更改的启动和成功完成:

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

1 个解决方案

#1

Your form template resides in the parent state. When you go from one child state to the other, their parent is not reloaded (or, to be more accurate, when you go from one state to another, none of their common ancestors are reloaded).

表单模板位于父状态。当您从一个子状态转到另一个子状态时，它们的父状态不会被重新加载(或者，更准确地说，当您从一个状态转到另一个状态时，它们的普通祖先没有被重新加载)。

However, that doesn't mean you can't clear the form on sub-state change. You can do one of the following:

然而，这并不意味着你不能清除亚状态变化的形式。你可以做以下其中之一:

Move the template to the sub-states to make it completely re-construct on each state change. Take care to use a "plain container" template () in the parent state, so that the sub-state templates have a place to be rendered into.
将模板移动到子状态，使其在每个状态更改上完全重新构建。注意在父状态中使用“plain container”模板()，这样子状态模板就有了呈现的位置。
Put your data in the parent scope. Child states have access to it, so you can manually edit the data on child state controllers' construction. (Just take care not to overwrite parent scope properties.)
将数据放在父范围内。子状态可以访问它，因此您可以手动编辑关于子状态控制器构造的数据。(注意不要覆盖父范围属性。)

(I've edited the answer to include main points from the discussion below.)

(我编辑了答案，将下面讨论的要点包括在内。)

#1