草庐IT

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

coder 2024-07-25 原文

假设我有一个用于编辑电子贺卡的 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 ”？

最佳答案

这不是 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();
    }
});

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

关于javascript - 如何在不刷新 Controller 的情况下替换 Angular 位置？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22177439/

何在javascriptcode电子贺卡贺卡angularjstabsangularjs-routing

有关javascript - 如何在不刷新 Controller 的情况下替换 Angular 位置？的更多相关文章

  1. ruby - 如何在 Ruby 中顺序创建 PI - 2

    出于纯粹的兴趣，我很好奇如何按顺序创建PI，而不是在过程结果之后生成数字，而是让数字在过程本身生成时显示。如果是这种情况，那么数字可以自行产生，我可以对以前看到的数字实现垃圾收集，从而创建一个无限系列。结果只是在Pi系列之后每秒生成一个数字。这是我通过互联网筛选的结果:这是流行的计算机友好算法，类机器算法:defarccot(x,unity)xpow=unity/xn=1sign=1sum=0loopdoterm=xpow/nbreakifterm==0sum+=sign*(xpow/n)xpow/=x*xn+=2sign=-signendsumenddefcalc_pi(digits

  2. ruby - 如何在 buildr 项目中使用 Ruby 代码？ - 2

    如何在buildr项目中使用Ruby？我在很多不同的项目中使用过Ruby、JRuby、Java和Clojure。我目前正在使用我的标准Ruby开发一个模拟应用程序，我想尝试使用Clojure后端(我确实喜欢功能代码)以及JRubygui和测试套件。我还可以看到在未来的不同项目中使用Scala作为后端。我想我要为我的项目尝试一下buildr(http://buildr.apache.org/)，但我注意到buildr似乎没有设置为在项目中使用JRuby代码本身!这看起来有点傻，因为该工具旨在统一通用的JVM语言并且是在ruby中构建的。除了将输出的jar包含在一个独特的、仅限ruby​​

  3. ruby - 什么是填充的 Base64 编码字符串以及如何在 ruby​​ 中生成它们？ - 2

    我正在使用的第三方API的文档状态:"[O]urAPIonlyacceptspaddedBase64encodedstrings."什么是“填充的Base64编码字符串”以及如何在Ruby中生成它们。下面的代码是我第一次尝试创建转换为Base64的JSON格式数据。xa=Base64.encode64(a.to_json) 最佳答案 他们说的padding其实就是Base64本身的一部分。它是末尾的“=”和“==”。Base64将3个字节的数据包编码为4个编码字符。所以如果你的输入数据有长度n和n%3=1=>"=="末尾用于填充n%

  4. ruby-on-rails - 渲染另一个 Controller 的 View - 2

    我想要做的是有2个不同的Controller，client和test_client。客户端Controller已经构建，我想创建一个test_clientController，我可以使用它来玩弄客户端的UI并根据需要进行调整。我主要是想绕过我在客户端中内置的验证及其对加载数据的管理Controller的依赖。所以我希望test_clientController加载示例数据集，然后呈现客户端Controller的索引View，以便我可以调整客户端UI。就是这样。我在test_clients索引方法中试过这个:classTestClientdefindexrender:template=>

  5. ruby-on-rails - 如何在 ruby​​ 中使用两个参数异步运行 exe？ - 2

    exe应该在我打开页面时运行。异步进程需要运行。有什么方法可以在ruby​​中使用两个参数异步运行exe吗？我已经尝试过ruby​​命令-system()、exec()但它正在等待过程完成。我需要用参数启动exe，无需等待进程完成是否有任何ruby​​gems会支持我的问题？ 最佳答案 您可以使用Process.spawn和Process.wait2:pid=Process.spawn'your.exe','--option'#Later...pid,status=Process.wait2pid您的程序将作为解释器的子进程执行。除

  6. ruby - 默认情况下使选项为 false - 2

    这是在Ruby中设置默认值的常用方法:classQuietByDefaultdefinitialize(opts={})@verbose=opts[:verbose]endend这是一个容易落入的陷阱:classVerboseNoMatterWhatdefinitialize(opts={})@verbose=opts[:verbose]||trueendend正确的做法是:classVerboseByDefaultdefinitialize(opts={})@verbose=opts.include?(:verbose)?opts[:verbose]:trueendend编写Verb

  7. ruby - 如何在续集中重新加载表模式？ - 2

    鉴于我有以下迁移:Sequel.migrationdoupdoalter_table:usersdoadd_column:is_admin,:default=>falseend#SequelrunsaDESCRIBEtablestatement,whenthemodelisloaded.#Atthispoint,itdoesnotknowthatusershaveais_adminflag.#Soitfails.@user=User.find(:email=>"admin@fancy-startup.example")@user.is_admin=true@user.save!ende

  8. ruby-on-rails - Rails 应用程序中的 Rails : How are you using application_controller. rb 是新手吗？ - 2

    刚入门rails，开始慢慢理解。有人可以解释或给我一些关于在application_controller中编码的好处或时间和原因的想法吗？有哪些用例。您如何为Rails应用程序使用应用程序Controller？我不想在那里放太多代码，因为据我了解，每个请求都会调用此Controller。这是真的？ 最佳答案 ApplicationController实际上是您应用程序中的每个其他Controller都将从中继承的类(尽管这不是强制性的)。我同意不要用太多代码弄乱它并保持干净整洁的态度，尽管在某些情况下ApplicationContr

  9. ruby-on-rails - rails : How to make a form post to another controller action - 2

    我知道您通常应该在Rails中使用新建/创建和编辑/更新之间的链接，但我有一个情况需要其他东西。无论如何我可以实现同样的连接吗？我有一个模型表单，我希望它发布数据(类似于新View如何发布到创建操作)。这是我的表格prohibitedthisjobfrombeingsaved: 最佳答案 使用:url选项。=form_for@job,:url=>company_path,:html=>{:method=>:post/:put} 关于ruby-on-rails-rails:Howtomak

  10. ruby - 如何在 Ruby 中拆分参数字符串 Bash 样式？ - 2

    我正在为一个项目制作一个简单的shell，我希望像在Bash中一样解析参数字符串。foobar"helloworld"fooz应该变成:["foo","bar","helloworld","fooz"]等等。到目前为止，我一直在使用CSV::parse_line，将列分隔符设置为""和.compact输出。问题是我现在必须选择是要支持单引号还是双引号。CSV不支持超过一个分隔符。Python有一个名为shlex的模块:>>>shlex.split("Test'helloworld'foo")['Test','helloworld','foo']>>>shlex.split('Test"

随机推荐