jjzjj

javascript - AngularJS $timeout 在计算值之前不等待 UI-Router 完成渲染

coder 2024-12-31 原文

我正在使用 angularJS 和 requirejs 通过 angularAMD 将一个复杂的应用程序连接在一起。

我的一个状态有两个简单的 View ，如下所示:

  $stateProvider
    .state("common", {
      url: "/",
      views: {
        "view1": {
          templateUrl: "view1.tpl.html"
          },
        "view2": {
          templateUrl: "view2.tpl.html"
        }
      }
    });

html

<div ui-view="view1"></div>
<div ui-view="view2"></div>

View1 有一个指令:

  .directive('checkViewOneBoxWidth', function ($timeout) {
    return {
      restrict: 'A',
      link: function (scope, elem, attrs) {
        var linkFunctionAfterDomComplete = function () {
          console.log(elem[0].scrollWidth);
        }
        $timeout(linkFunctionAfterDomComplete, 0);
      }
    }
  })

view2 有一个样式表，可以将一些样式应用到页面，包括更改 view1< 的="">height 和 width/ 容器。

我想要函数 linkFunctionAfterDomComplete 计算元素的 height 和 width 属性 after view2 中的样式表修改了 DOM，因此我将 linkFunctionAfterDomComplete 函数包装在 $timeout() 中。

checkViewOneBoxWidth 中的 console.log 报告此元素的大小，在 view2 中样式表的样式修改大小之前这个元素，尽管事实上我们期望 $timeout 导致 linkFunctionAfterDomComplete 函数在从 view2 设置样式后计算这个元素的大小> 已应用，DOM 已完成。

如何让 linkFunctionAfterDomComplete 计算元素属性，这些元素属性反射(reflect)元素在完全呈现并应用所有样式后的真实状态？

http://plnkr.co/edit/WjGogh?p=preview

最佳答案

你需要传递一个函数给$timeout:

$timeout(function() {
  console.log('timeout: view 1 linked')
}, 0);

或者:

var fn = function () {
  console.log('timeout: view 1 linked');
};

$timeout(fn, 0);

以下内容:

$timeout(console.log('timeout: view 1 linked'), 0);

将立即执行 console.log，然后将返回值(undefined)作为第一个参数传递给 $timeout。

演示: http://plnkr.co/edit/zWgoJihcMH693fWfUp09?p=preview

不确定您在实际应用中是否遇到同样的问题，但我认为无论如何我都应该发布它。

基于编辑的新答案

问题是您的链接元素位于 View 模板中，而不是在 index.html 中。

如果将其移至 index.html，它将按预期工作(在这种情况下您不需要 $timeout，除非您的实际应用程序从指令中添加自定义 HTML):

演示: http://plnkr.co/edit/m3sriF2YYH5T8y42R5Lr?p=preview

如果在 View 模板中保留链接并保留超时，基本上会发生这种情况:

  1. Angular 将运行其编译函数来准备所有绑定(bind)和 View 。
  2. 来自 View 的 HTML 将被插入到 DOM 中，指令将被执行并且 console.log 将被添加到超时队列中。
  3. 链接元素现已插入到 DOM 中，浏览器将开始检索 CSS。超时队列中的console.log会执行。

请注意，CSS 的获取是异步的，超时队列中的 console.log 将在 CSS 的获取和解析完成之前执行。

另请注意，您可能会在不同的浏览器中看到不同的行为。

有解决方案，但可能会变得非常困惑。

阅读更多相关信息:

When is a stylesheet really loaded?

我建议只将链接移动到 index.html。

关于javascript - AngularJS $timeout 在计算值之前不等待 UI-Router 完成渲染，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33619284/

javascript不等codetimeoutviewangularjsangular-ui-routerangular-amd

有关javascript - AngularJS $timeout 在计算值之前不等待 UI-Router 完成渲染的更多相关文章

  1. ruby - i18n Assets 管理/翻译 UI - 2

    我正在使用i18n从头开始​​构建一个多语言网络应用程序，虽然我自己可以处理一大堆yml文件，但我说的语言(非常)有限，最终我想寻求外部帮助帮助。我想知道这里是否有人在使用UI插件/gem(与django上的django-rosetta不同)来处理多个翻译器，其中一些翻译器不愿意或无法处理存储库中的100多个文件，处理语言数据。谢谢&问候，安德拉斯(如果您已经在ruby​​onrails-talk上遇到了这个问题，我们深表歉意) 最佳答案 有一个rails3branchofthetolkgem在github上。您可以通过在Gemfi

  2. ruby-on-rails - 使用一系列等级计算字母等级 - 2

    这里是Ruby新手。完成一些练习后碰壁了。练习:计算一系列成绩的字母等级创建一个方法get_grade来接受测试分数数组。数组中的每个分数应介于0和100之间，其中100是最大分数。计算平均分并将字母等级作为字符串返回，即“A”、“B”、“C”、“D”、“E”或“F”。我一直返回错误:avg.rb:1:syntaxerror,unexpectedtLBRACK,expecting')'defget_grade([100,90,80])^avg.rb:1:syntaxerror,unexpected')',expecting$end这是我目前所拥有的。我想坚持使用下面的方法或.join，

  3. ruby - 如何在 Rails 4 中使用表单对象之前的验证回调？ - 2

    我有一个服务模型/表及其注册表。在表单中，我几乎拥有服务的所有字段，但我想在验证服务对象之前自动设置其中一些值。示例:--服务Controller#创建Action:defcreate@service=Service.new@service_form=ServiceFormObject.new(@service)@service_form.validate(params[:service_form_object])and@service_form.saverespond_with(@service_form,location:admin_services_path)end在验证@ser

  4. ruby-on-rails - 如何在 Ruby on Rails 中实现由 JSF 2.0 (Primefaces) 驱动的 UI 魔法 - 2

    按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visitthehelpcenter指导。关闭10年前。问题1)我想知道ruby​​onrails是否有功能类似于primefaces的gem。我问的原因是如果您使用primefaces(http://www.primefaces.org/showcase-labs/ui/home.jsf)，开发人员无需担心javascript或jquery的东西。据我所知，JSF是一个规范，基于规范的各种可用实现，prim

  5. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明：前端使用微信微信小程序开发工具：后端使用ssm：VU

  6. ruby - 如何计算 Liquid 中的变量 +1 - 2

    我对如何计算通过{%assignvar=0%}赋值的变量加一完全感到困惑。这应该是最简单的任务。到目前为止，这是我尝试过的:{%assignamount=0%}{%forvariantinproduct.variants%}{%assignamount=amount+1%}{%endfor%}Amount:{{amount}}结果总是0。也许我忽略了一些明显的东西。也许有更好的方法。我想要存档的只是获取运行的迭代次数。 最佳答案 因为{{incrementamount}}将输出您的变量值并且不会影响{%assign%}定义的变量，我

  7. ruby-on-rails - 如何处理 Grape 中特定操作的过滤器之前？ - 2

    我正在我的Rails项目中安装Grape以构建RESTfulAPI。现在一些端点的操作需要身份验证，而另一些则不需要身份验证。例如，我有users端点，看起来像这样:moduleBackendmoduleV1classUsers现在如您所见，除了password/forget之外的所有操作都需要用户登录/验证。创建一个新的端点也没有意义，比如passwords并且只是删除password/forget从逻辑上讲，这个端点应该与用户资源。问题是Grapebefore过滤器没有像except,only这样的选项，我可以在其中说对某些操作应用过滤器。您通常如何干净利落地处理这种情况？

  8. ruby-on-rails - 在 Ruby on Rails 中发送响应之前如何等待多个异步操作完成？ - 2

    在我做的一些网络开发中，我有多个操作开始，比如对外部API的GET请求，我希望它们同时开始，因为一个不依赖另一个的结果。我希望事情能够在后台运行。我找到了concurrent-rubylibrary这似乎运作良好。通过将其混合到您创建的类中，该类的方法具有在后台线程上运行的异步版本。这导致我编写如下代码，其中FirstAsyncWorker和SecondAsyncWorker是我编写的类，我在其中混合了Concurrent::Async模块，并编写了一个名为“work”的方法来发送HTTP请求:defindexop1_result=FirstAsyncWorker.new.async.

  9. ruby - 使用 Ruby，计算 n x m 数组的每一列中有多少个 true 的简单方法是什么？ - 2

    给定一个nxmbool数组:[[true,true,false],[false,true,true],[false,true,true]]有什么简单的方法可以返回“该列中有多少个true？”结果应该是[1,3,2] 最佳答案 使用转置得到一个数组，其中每个子数组代表一列，然后将每一列映射到其中的true数:arr.transpose.map{|subarr|subarr.count(true)}这是一个带有inject的版本，应该在1.8.6上运行，没有任何依赖:arr.transpose.map{|subarr|subarr.in

  10. ruby-on-rails - 在所有延迟的作业之前 Hook - 2

    是否可以在所有delayed_job任务之前运行一个方法？基本上，我们试图确保每个运行delayed_job的服务器都有我们代码的最新实例，所以我们想运行一个方法来在每个作业运行之前检查它。(我们已经有了“check”方法并在别处使用它。问题只是关于如何从delayed_job中调用它。) 最佳答案 现在有一种官方方法可以通过插件来做到这一点。这篇博文通过示例清楚地描述了如何执行此操作http://www.salsify.com/blog/delayed-jobs-callbacks-and-hooks-in-rails(本文中描述

随机推荐