angular – ng-if – 如何在渲染ng-if模板后回调

在Angular中，我需要在加载了某个类的元素后调用一个函数。 通过ng-if =’expr’控制元素的显示。 $ scope.expr的值在某个ajax调用响应后设置。

现在，如果我尝试将$ watch放在expr上，或者使用$ evalAsync。 它不起作用。 可能是因为这些事件是在模板部分实际运行之前运行的。

下面是一个示例代码： http ： //jsbin.com/kuyas/1/edit这里我需要一个关于ng的回调类型 – 如果在渲染模板后执行它。

Answer 1

一个可能的答案是创建一个指令，做任何你想做的事情。 如果您仅在ng-if控制的HTML部分中使用该指令，则该指令将处于hibernate状态，直到ng-if表达式为真。

那会做你想要的吗？

Answer 2

问题是没有办法知道是否使用摘要循环完成了角度，确保所有元素都已渲染。

要解决这个问题，有两种选择

1. 将回调函数包装在指令中。 在ng-if中包含该指令。 只有当你想要执行回调时才使该表达式成立。
2. 在里面调用你的回调函数， setTimeOut(function(){ ... }, 0); 因为默认情况下浏览器会将所有事件保留在队列中，因此，当摘要循环运行时，您的回调函数将进入队列并在摘要循环结束后立即执行。

Answer 3

我认为最简单的解决方案是执行以下操作：

只有在渲染了受ng-if影响的内容时，才会调用您的回调。

Answer 4

该指令看起来像这样：

 import * as angular from 'angular'; class OnFinishRenderDirective implements angular.IDirective { public restrict = 'A'; public replace = false; public link = ( scope: any, // scope: angular.IScope, element: angular.IAugmentedJQuery, attr: any, modelCtrl: any, link: angular.ITemplateLinkingFunction ) => { if ( scope.$last === true ) { this.$timeout(() => { scope.$emit( 'elementRendered' ); } ); } } constructor( private $timeout: angular.ITimeoutService ) { } } export function onFinishRenderFactory(): angular.IDirectiveFactory { var directive = ( $timeout: angular.ITimeoutService ) => new OnFinishRenderDirective( $timeout ); directive.$inject = [ '$timeout' ]; return directive; } 

您必须导入它并添加到您的模块中

 import { onFinishRenderFactory } from './onFinishRender/onFinishRender.directive'; angular.module( 'yourModule', [] ) .directive( 'onFinishRender', onFinishRenderFactory() ) 

然后，您可以在标记中的某个位置使用该指令，以在呈现指令时发出事件。

 
I am rendered 

您甚至可以在指令DIV中添加一个额外的属性，然后您可以从链接函数中的ATTR对象中获取该属性，并添加到$ emit函数以标识要呈现的特定DIV。

这是否回答你的问题？