javascript angular - ng-if - 如何在呈现 ng-if 模板后回调
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24437658/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
angular - ng-if - how to callback after ng-if template has been rendered
提问by Charanjeet Kaur
in Angular, I need to call a function after an element with certain class has been loaded. Display of the element is controlled via ng-if='expr'. Value of $scope.expr is set after some ajax call has responded.
在 Angular 中，我需要在加载了某个类的元素后调用一个函数。元素的显示通过 ng-if='expr' 控制。$scope.expr 的值是在一些 ajax 调用响应后设置的。
Now, if I try putting $watch on expr, or using $evalAsync. it is not working. probably the reason being that these events are run before the template part actually runs.
现在，如果我尝试将 $watch 放在 expr 上，或者使用 $evalAsync。它不工作。可能的原因是这些事件在模板部分实际运行之前运行。
Here is a sample code : http://jsbin.com/kuyas/1/editHere I need a callback sort of thing on ng-if that gets executed after the template has rendered.
这是一个示例代码：http: //jsbin.com/kuyas/1/edit这里我需要在模板呈现后执行的 ng-if 上的回调类型。
回答by John Munsch
One possible answer would be to create a directive that does whatever you want to do. If you then use that directive only within the section of HTML controlled by the ng-if, then the directive will be dormant until the ng-if expression is true.
一个可能的答案是创建一个指令来做你想做的任何事情。如果您随后仅在 ng-if 控制的 HTML 部分中使用该指令，则该指令将处于休眠状态，直到 ng-if 表达式为真。
Would that do what you want?
那会做你想要的吗？
回答by Charanjeet Kaur
Problem was that there is no way to know if angular is done with the digest loop, ensuring that all elements have been rendered.
问题是没有办法知道 angular 是否在摘要循环中完成，确保所有元素都已呈现。
To solve this issue, there were two options
为了解决这个问题，有两种选择
- Wrap your callback function in a directive. include that directive in ng-if. and make that expression true only when u want your callback to be executed.
- Call your callback function inside,
setTimeOut(function(){ ... }, 0);as browsers by default keep all events in a queue, therefore, when digest loop is running, your callback function will enter the queue and get executed as soon digest loop is over.
- 将您的回调函数包装在一个指令中。将该指令包含在 ng-if 中。并仅在您希望执行回调时使该表达式为真。
- 在内部调用回调函数，
setTimeOut(function(){ ... }, 0);因为浏览器默认将所有事件保存在队列中，因此，当摘要循环运行时，回调函数将进入队列并在摘要循环结束后立即执行。
回答by aBertrand
Simplest solution in my view is to do the following:
在我看来，最简单的解决方案是执行以下操作：
<div ng-if="sectionActivated">
<div ng-init="callBack()"></div>
</div>
Your callback will be called only when what is affected by ng-ifhas been rendered.
只有在ng-if呈现受影响的内容时才会调用您的回调。
回答by Mattijs
The directive could look something like this:
该指令可能如下所示：
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;
}
You would have to import it and add to your module
您必须导入它并添加到您的模块中
import { onFinishRenderFactory } from './onFinishRender/onFinishRender.directive';
angular.module( 'yourModule', [] )
.directive( 'onFinishRender', onFinishRenderFactory() )
Then you can use the directive somewhere in your markup to emit the event when the directive has been rendered.
然后，您可以在标记中的某处使用该指令，以在呈现该指令时发出该事件。
<div onFinishRender>I am rendered</div>
You could even add an extra attribute in the directive DIV which you can then grab from the ATTR object in the link function and add to your $emit function to identify this specific DIV to be rendered.
您甚至可以在指令 DIV 中添加一个额外的属性，然后您可以从链接函数中的 ATTR 对象中获取该属性，并将其添加到您的 $emit 函数中以标识要呈现的特定 DIV。
Does that answer your question?
这是否回答你的问题？
