31

$scope.myWork()渲染模板后如何运行方法？我想设置，$scope.value然后我需要用 JQuery 改变一些东西（例如在模板内容的 DOM 中）。$scope.$watch('value', function (){....})正在“在”渲染之前工作（模板的 DOM 尚不可用）。谢谢。

4

5 回答 5

19

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

请参阅ng-click以获得一个想法。

于 2012-08-14T13:48:16.603 回答
17

我在属性指令中使用terminalandtransclude在更新模型并呈现视图后调用作用域方法（在我的情况下，在 $Resource.query 之后调整 iframe 的大小）： 

.directive('postRender', [ '$timeout', function($timeout) {
var def = {
    restrict : 'A', 
    terminal : true,
    transclude : true,
    link : function(scope, element, attrs) {
        $timeout(scope.resize, 0);  //Calling a scoped method
    }
};
return def;
}])

$timeout 是黑魔法。应该可以将 JS 方法声明为属性值并 $parse 它。

所以我在 a 中使用它ng-repeat（在我的例子中，树是递归渲染的）：

<div post-render ng-repeat="r in regions | orderBy:'name'" ng-include="'tree_region_renderer.html'">
于 2012-12-05T16:49:44.263 回答
8

我也有这个问题，其他解决方案对我来说效果不佳，而且看起来 Protractor 必须解决的那种事情。对Protractor 的客户端脚本的快速回顾表明它用于angular.getTestability(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]');
        });
      }
  };
}
于 2016-02-10T21:33:38.937 回答
2

Jens 上面的回答会起作用，但请注意，在较新的 AngularJS 版本（例如 1.2.3）上，您不能将 postRender 指令与 ng-repeat 结合为同一标签上的属性，因为它们都具有 transclude: true。在这种情况下，您必须删除 transclude 或使用带有 postRender 指令属性的单独标记。
使用终端时还要注意属性的优先级：true，因为您可能最终使属性无效，因为同一标签上的优先级更高。

于 2013-12-18T09:53:24.257 回答
-1

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

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

HTML：

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

JS：

$scope.foo = function() {
    $timeout(function() {
        // This code runs after the DOM renders
    });
});
于 2016-03-09T22:21:22.183 回答