Javascript angular-ng if-如何在呈现ng if模板后回调

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

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

下面是一个示例代码：

---

在这里，如果在模板呈现后执行，我需要在ng上执行回调之类的操作。

一个可能的答案是创建一个可以执行任何操作的指令。如果随后仅在ng If控制的HTML部分中使用该指令，则该指令将处于休眠状态，直到ng If表达式为true为止

<div onFinishRender>I am rendered</div>

---

这会满足您的需要吗？

问题是无法知道是否使用摘要循环完成了angular，从而确保所有元素都已渲染

<div onFinishRender>I am rendered</div>

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

将回调函数包装在指令中。在ng if中包含该指令。只有当您希望执行回调时，才使该表达式为真

在内部调用回调函数，

setTimeOut（function（）{…}，0）由于默认情况下浏览器将所有事件保留在队列中，因此，当摘要循环运行时，回调函数将进入队列并在摘要循环结束后立即执行

---

在我看来，最简单的解决方案是执行以下操作：

<div ng-if="sectionActivated">
    <div ng-init="callBack()"></div>
</div>

---

只有在呈现了受

ng影响的内容时才会调用回调。
指令可能如下所示：

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;
}

<div onFinishRender>I am rendered</div>

您必须将其导入并添加到模块中

import { onFinishRenderFactory } from './onFinishRender/onFinishRender.directive';

angular.module( 'yourModule', [] )
.directive( 'onFinishRender', onFinishRenderFactory() )

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

<div onFinishRender>I am rendered</div>

我被渲染了

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

<div onFinishRender>I am rendered</div>

这回答了你的问题吗
 我更喜欢这个带有setTimeout的解决方案，它允许我在
setTimeout（function（）{//do whatever}，0）的情况下做一些不是页面上的小部件或限制在ng_内部的事情这是完美的。非常感谢。我喜欢这个。我创建了一个IAMDrendered组件，它将在$OnInit（）上响应渲染，在$OnDestroy（）上响应葬礼！很好的建议。@Mattijs，我们怎么做angular1@SukeshChand在下面检查我的答案这部分对我有效，但使用了
setTimeout（function（）{//do whatever}，0）还因为在我试图禁用某些自定义元素时，它们还没有准备好，所以对于这些自定义元素，我使用在页面加载5秒后设置超时来禁用它们