当 Angular 完成向 DOM 添加范围更新时,如何触发方法?

2024-02-23

我正在寻找一种在向 $scope 变量(在本例中为 $scope.results)添加更改后执行代码的方法。我需要这样做是为了调用一些遗留代码,这些代码要求项目位于 DOM 中才能执行。

我的真实代码是触发 AJAX 调用,并更新作用域变量以更新 ui。因此,目前我的代码在推送到作用域后立即执行,但遗留代码失败,因为 dom 元素尚不可用。

我可以使用 setTimeout() 添加一个丑陋的延迟,但这并不能保证 DOM 真正准备好。

我的问题是,有什么方法可以绑定到“渲染”之类的事件吗?

var myApp = angular.module('myApp', []);

myApp.controller("myController", ['$scope', function($scope){
    var resultsToLoad = [{id: 1, name: "one"},{id: 2, name: "two"},{id: 3, name: "three"}];
    $scope.results = [];

    $scope.loadResults = function(){
        for(var i=0; i < resultsToLoad.length; i++){
            $scope.results.push(resultsToLoad[i]);
        }
    }

    function doneAddingToDom(){
        // do something awesome like trigger a service call to log
    }
}]);
angular.bootstrap(document, ['myApp']);

模拟代码链接:http://jsfiddle.net/acolchado/BhApF/5/ http://jsfiddle.net/acolchado/BhApF/5/

提前致谢!


The $evalAsync http://docs.angularjs.org/api/ng.%24rootScope.Scope#%24evalAsync队列用于安排需要在当前堆栈帧之外但在浏览器视图渲染之前发生的工作。 --http://docs.angularjs.org/guide/concepts#runtime https://code.angularjs.org/1.1.5/docs/guide/concepts#runtime

好的,那么什么是“堆栈框架”? Github 的评论透露了更多信息:

如果您从控制器入队,那么它将在之前,但如果您从指令入队,那么它将在之后。 --https://github.com/angular/angular.js/issues/734#issuecomment-3675158 https://github.com/angular/angular.js/issues/734#issuecomment-3675158

上面,Misko 正在讨论 $evalAsync 排队等待执行的代码何时运行,与 Angular 何时更新 DOM 相关。我建议您也阅读之前的两条 Github 评论,以获取完整的上下文。

So 如果代码使用指令中的 $evalAsync 进行排队,它应该在 Angular 操作 DOM 之后、浏览器渲染之前运行。如果您需要在浏览器渲染后或控制器更新模型后运行某些内容,请使用$timeout(..., 0);

也可以看看https://stackoverflow.com/a/13619324/215945 https://stackoverflow.com/a/13619324/215945,其中还有一个使用 $evalAsync() 的示例小提琴。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

当 Angular 完成向 DOM 添加范围更新时,如何触发方法? 的相关文章

随机推荐

  • 我应该忽略在 Git 中提交的 launchSettings.json 文件吗?

    我找到了这个相对知名的 GitHub 存储库 他们在那里考虑了launchSettings json文件 Visual Studio 2017 用于 Net Core 项目 是ignored https github com github
  • Rails 中的竞争条件 first_or_create

    我正在尝试强制表字段之一中值的唯一性 改变桌子不是一个选择 我需要使用 ActiveRecord 有条件地将一行插入表中 但我担心同步 Does first or createRails ActiveRecord 中的防止竞争条件 这是源代
  • ocaml 漂亮的打印机(代码格式化程序)

    我正在寻找适用于 ocaml 的代码格式化程序或漂亮的打印机 类似 gofmt 的 go 编程语言 它最好应该保留评论 我正在纠正提交的内容 一些代码的格式使其非常难以阅读 如果你不关心评论 你可以使用camlp4 camlp4
  • 如何使用 FirebaseRecyclerAdapter

    Override public void onStart super onStart FirebaseRecyclerAdapter
  • iPhone - UIImagePickerControllerDelegate 继承

    我添加了一个UIImagePickerController to a UIViewController 我还分配了UIImagePickerControllerDelegate对此UIViewController 当我执行以下行时 myPi
  • Discord.js 计时器,定期更新倒计时

    我目前正在制作一个计时器命令 用户可以输入类似 prefix timer 10m 的内容 机器人将启动一个 10 分钟的计时器 并且每 20 30 秒它会自我更新一次 但我不确定我该怎么做它 提前致谢 一种可能的方法是使用setInterv
  • Doctrine DQL 从关系表中删除

    使用 Doctrine 2 和 Symfony 2 0 我有两个 Doctrine 实体 假设 EntityA 和 EntityB 他们之间有多对多关系 这样数据库中就创建了一个EntityA EntityB表 使用 DQL 或 Query
  • Clojure core.match 无法在类上匹配

    当评估这个超级简单的 core match 表达式时 我得到 match class 3 14 Integer Integer Double Doubler gt Integer 这怎么可能是正确的 我是否遗漏了有关 core match
  • 如何通过python执行shell脚本

    我有一个脚本 abc sh 其中包含带有标志的命令列表 例子 abc sh echo FLAG name cp FLAG file1 FLAG file2 echo file copied 我想通过python代码执行这个脚本 说 xyz
  • RSpec - 测试强参数 ActionController::ParameterMissing

    如何测试某一行为是否会引发ActionController ParameterMissing例外 例如 it raises an exception do post create expect response to raise Actio
  • 如何在 Ruby 中读取文件的行

    我试图使用以下代码从文件中读取行 但是当读一个file http dl dropbox com u 559353 rss20 xml txt 内容全部在一行 line num 0 File open xxx txt each do line
  • Swift 将 AnyObject 转换为 Block

    因此 我使用 Salesforce SDK 并为整个 SDK 构建了桥接标头 它们提供了一个块语法 但尚未转换成最有用的代码 例如 func sendRESTRequest request SFRestRequest failBlock S
  • 在模板内对 $data 进行双向绑定

    我正在尝试设置通用的 Knockout 模板 可以根据数据类型在编辑和只读模式之间切换 如果您曾经使用过 ASP NET 的动态数据 它就像它们的字段模板 例如 这是这样使用的
  • 可以单独编译任何 .c 文件(即没有 main ?)

    我目前有一个 类似库 的 c 文件 如下所示 我有两个问题 如果我想看看它本身是否编译得很好 我该怎么做 如果我尝试 gcc 它 它总是会给出 no main 错误 这是有道理的 但会引发一个问题 知道给定的 c 文件是否可以在 隔离 中编
  • 迭代错误数组时出现 Swift 内存泄漏

    我对 Swift 比较陌生 所以我希望我没有问一个愚蠢的问题 我有一些实例化类型数组的代码Error 稍后将被迭代并打印到控制台 当使用 Leaks 工具通过 Instruments 运行此代码时 它显示了泄漏 SwiftNativeNSE
  • 如何使用jquery、express和handlebars创建无刷新页面?

    我正在学习 Express JS 我的问题是 我想使用 NodeJS 创建两个页面 它使用把手作为模板引擎 但我希望第一页应该使用发送res render home 第二个页面应该由 jQuery 使用 ajax 调用来调用 以表达并从表达
  • “错误:<路径> 属性 d:预期数字,“MNaN、NaNLNaN、NaNL…”。“ D3 错误

    我正在从 Quandl 的 API 导入一些数据 以制作多年来布伦特油价的图表 我正在提供来自 Angular 发出的 HTTP 请求的数据 不知何故 所提供的数据没有被读取为数字 因为我收到以下错误 错误 属性 d 预期数字 MNaN N
  • 设计 Vuetify 选择器的样式

    选择器的 Vuetify 组件是
  • TMonthCalendar 和 Delphi 样式 (Delphi XE2)

    TMontCalendar 似乎是一个 Windows 包装器 因此它不会受到新的 VCL 样式的影响 您知道解决方案吗 The TMonthCalendar http docwiki embarcadero com Libraries e
  • 当 Angular 完成向 DOM 添加范围更新时,如何触发方法?

    我正在寻找一种在向 scope 变量 在本例中为 scope results 添加更改后执行代码的方法 我需要这样做是为了调用一些遗留代码 这些代码要求项目位于 DOM 中才能执行 我的真实代码是触发 AJAX 调用 并更新作用域变量以更新