javascript - 如何在不刷新 Controller 的情况下替换 Angular 位置？

Question

假设我有一个用于编辑电子贺卡的 Angular 应用程序。创建新电子贺卡使用类似 #/ecard/create 的路径，编辑现有电子贺卡使用类似 #/ecard/:id 的路径。标签系统让我们可以同时打开多个电子贺卡进行编辑。

我们想要一个自动保存功能，就像用户期望的那样。现代网络邮件或 wiki 软件(或 StackOverflow 本身)。我们不想在用户打开创建表单时保存电子贺卡草稿，这会给我们很多空白电子贺卡草稿，所以我们在用户开始输入时开始自动保存。

我想在我们的 Controller 中编写这样的代码(这被简化为不包括例如错误处理或在选项卡关闭时停止自动保存等):

$scope.autosave = function () {
    ECardService.autosave($scope.eCard).then(function (response) {
        $location.path('/ecard/' + response.id).replace();
        $timeout($scope.autosave, AUTOSAVE_INTERVAL);
    });
};
$timeout($scope.autosave, AUTOSAVE_INTERVAL);

上面的代码工作得很好，除了一件事:当位置改变时，我们的 Controller 重新加载并且 View 重新渲染。因此，如果用户在自动保存完成时正在打字，则会出现短暂的闪烁，然后他们就会失去位置。

我考虑了几种方法来缓解这个问题:

1) 更改路径以使用搜索路径，并在ngRoute 配置中将reloadOnSearch 设置为false。因此路径将从 #/ecard?id=create 更改为例如#/ecard/id=123 因此不会强制重新加载。问题是我可能打开了多个电子贺卡，我确实想从例如#/ecard/id=123 到 #/ecard/id=321 触发路由更改并重新加载 Controller 。所以这不太可行。

2) 在这种情况下，不要费心编辑 URL 和处理后退按钮，这会产生奇怪的行为。这很诱人，但如果用户打开他们现有的电子贺卡列表并尝试打开已保存的特定电子贺卡，我们希望选项卡系统识别它应该只显示当前现有的选项卡而不是打开新选项卡。
理论上，我们可以通过更新我们的标签系统使其更智能来解决这个问题；它不仅可以检查路径，还可以检查路径和持久性 ID，我们可以将其存储在某个地方。这会使 Tab 键系统变得更加复杂，而且对于此功能来说这似乎有点过分了。

3) 仅在用户未主动编辑时才更改 URL，例如编写一个 $scope.userIsIdle() 函数，如果用户进行任何编辑至少 10 秒后返回 true，然后基于此更新路径。这个的简化版本看起来像:

$scope.updatePathWhenSafe = function (path) {
    if ($scope.userIsIdle()) {
        $location.path(path).replace();
    } else {
        $timeout(function () {
            $scope.updatePathWhenSafe(path);
        }, 1000);
    }
};

我最终选择了选项 #3；它比选项 #2 简单得多，但实现和测试比我想要的要复杂得多，尤其是当我考虑到边缘情况时，例如“如果此超时触发时选项卡不再是事件选项卡怎么办？”我希望选项 #4 成为可能。

4) 在 Angular 之外编辑当前位置和历史记录，假设这是必要且可能的。这将是我的首选解决方案，但我的研究表明尝试绕过 $location 服务来更改路径或编辑历史记录是不安全/不可取的。有什么安全的方法可以做到这一点吗？如果我只说“更改当前路径但不重新加载 Controller ”，事情就会变得如此简单得多。

选项#4 可能/可行吗？如果没有，那么有更好的方法吗？也许是一些神奇的“以 Angular 方式进行但不知何故不刷新 Controller ”？

Answer 1

这不是 Angular 方式，但它很有用。收到数据后，您可以检查是否有焦点元素(用户正在输入)。如果是这样，那么您需要定义一个函数，该函数在元素失去焦点时执行一次。如果没有焦点元素，则立即更改 url。

像这样:

ECardService.autosave($scope.eCard).then(function (response) {
    if($(':focus').length){ //if there is focused element
        $(':focus').one('blur', function(){ //
            $location.path('/ecard/' + response.id).replace(); //perform once
        });
    }
    else{
        $location.path('/ecard/' + response.id).replace();
    }
});

当然这不是最优雅的解决方案，但它似乎可以解决您的问题。