Question

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

新表单的网址为：＃/ dashboard / form / someFormType

可编辑表单的网址为：＃/ 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.create的ui-sref，则会从仪表板更改URL。 form.edit到dashboard.form.create，解析了dashboard.form.create，但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

您的表单模板位于父状态。当你从一个孩子的状态转到另一个子状态时，他们的父母不会被重新加载（或者，更准确，当你从一个州转到另一个州时，他们的共同祖先都没有被重新加载）。 / p>

但是，这并不意味着你无法清除子状态变化的形式。您可以执行以下操作之一：

将模板移动到子状态，使其在每次状态更改时完全重新构建。小心使用＆＃34;普通容器＆＃34;父状态下的template（），以便子状态模板具有要渲染的位置。
将您的数据放在父作用域中。子状态可以访问它，因此您可以手动编辑子状态控制器上的数据。施工。（请注意不要overwrite parent scope properties。）

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

UI-Router StateChange但视图UI不刷新

1 个答案: