AngularJS：渲染后回调（渲染后使用DOM）

如何在呈现模板之后运行方法

$scope.myWork（）

？我想设置

$scope.value

，然后我需要用JQuery更改一些内容（例如在模板内容的DOM中）<代码>$scope.$watch（'value'，函数（）{..}）正在“之前”渲染（模板的DOM还不可用）。谢谢。

创建一个在链接函数中运行代码的。 在构建模板后调用link函数

---

请参阅以获得想法。

我在属性指令中使用

terminal

和

transclude

在更新模型和渲染视图后调用作用域方法（在我的示例中是在$Resource.query之后调整iframe的大小）：

$timeout是一个黑魔法。应该可以将JS方法声明为属性值并对其进行$parse

因此我在

ng repeat

中使用它（在我的例子中，树是递归呈现的）：

---

上面的Jens答案将起作用，但请注意，在较新的AngularJS版本（例如1.2.3）上，您不能将postRender指令与ng repeat作为属性组合在同一标记上，因为它们都具有transclude:true。在这种情况下，您必须删除transclude或使用postRender指令属性的单独标记。

---

使用terminal时还要注意属性的优先级：true，因为同一个标签上的优先级较高的属性可能会导致属性无效。

我也有这个问题，其他解决方案对我来说效果不好，而且似乎量角器必须解决这类问题。快速回顾一下，它使用

angular.getestability（element）

来知道何时实际运行测试。该方法等待直到没有挂起的超时或http请求，然后运行回调。这是我的指示：

export function afterRender ($timeout) {
"ngInject";
  return {
      restrict: 'A',
      terminal: true,
      link: function (scope, element, attrs) {
        angular.getTestability(element).whenStable(function() {
          console.log('[rendered]');
        });
      }
  };
}

---

我在寻找分析DOM呈现的方法时发现了这个页面。我发现了一个非常简单的解决方案，它适用于我的用例

将ng init处理程序附加到DOM元素，并在处理程序函数中使用$timeout来产生执行。例如：

HTML:

---

这是我的示例，但不起作用-（为什么每次渲染后不调用$scope.afterRender？）。因为link函数在元素渲染后调用一次，而不是在元素的每次渲染后调用。为什么不能创建指令？是否使用jQuery和update进行了所需的更改？在控制器内部操纵DOM不是一个好的实践。我必须用固定高度滚动div。我有在字段列表中移动光标的按钮。我在ngClick中设置$scope.value，然后我需要在正确的位置滚动（通过scrollTop）。这就是为什么我想在控制器内部使用DOM进行操作的原因。有什么想法吗？看看

$anchorScroll

能否完成这项工作或为此创建一项服务（使您的控制器更易于测试）。将div的实际“顶部”设置为控制器中的变量的指令和要滚动的服务将是一个很好的匹配。可能您希望在div中创建一个控制器指令，并且在每一行中可以在链接函数中添加一个指令（渲染后）它使用DIV中的控制器将其传递到“top”，然后控制器滚动到它。在child（行）中，您将使用

require:'^DIVdirectiveName'

获取控制器。查看此更新提琴由于您正在Angular应用程序中运行，您只需插入

$browser

，并使用其

notifywhennoutstandingRequests（）

方法注册回调。但是请注意，这依赖于一些未记录的私有API，可能会在没有通知的情况下中断。将来，我将删除该指令并从驱动程序中调用whenStable（）

<div post-render ng-repeat="r in regions | orderBy:'name'" ng-include="'tree_region_renderer.html'">

export function afterRender ($timeout) {
"ngInject";
  return {
      restrict: 'A',
      terminal: true,
      link: function (scope, element, attrs) {
        angular.getTestability(element).whenStable(function() {
          console.log('[rendered]');
        });
      }
  };
}

<div ng-init="foo()">

$scope.foo = function() {
    $timeout(function() {
        // This code runs after the DOM renders
    });
});