AngularJS:渲染后回调(渲染后使用DOM)

Question

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

Answer 1

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

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

Answer 2

在更新模型并呈现视图之后,我使用terminal和transclude在属性指令中调用范围方法(在我的情况下,在$ 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方法,属性值和$解析它.

所以我在它中使用它ng-repeat(在我的例子中,树是递归渲染的):

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

Answer 3

我也有这个问题,其他解决方案对我来说效果不好,看起来像是量角器必须解决的问题.快速回顾一下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]');
        });
      }
  };
}