仅在数据在 DOM 中渲染后才在指令中调用 jquery 插件答案

【问题标题】：Call jquery plugin in directive only after data is renderer in DOM仅在数据在 DOM 中渲染后才在指令中调用 jquery 插件
【发布时间】：2013-05-12 12:32:17
【问题描述】：

我想在 Angular 指令中初始化一个 jquery 插件，但仅在返回服务数据和 DOM 中的第一个渲染器之后。我似乎可以弄清楚如何在角度指令中做到这一点。到目前为止我有这段代码，但似乎我在服务数据到达之后调用插件，但在它是 DOM 上的渲染器之前...... 有什么提示吗？

myApp.directive('myDirective', function () {
return {
    restrict: 'A',
    link: function ($scope, element, attrs) {
        $scope.$watch("data.length", function( newValue, oldValue ) {
            if ( newValue === oldValue ) {
                console.log( "Should return..." );
                return; 
            }
            $(element).elastislide();
        });
    }
};

});

=== 编辑 ==== 如果我使用 setTimeout 函数推迟执行它可以工作，这是正确的方法吗？

    myApp.directive('myDirective', function () {
return {
    restrict: 'A',
    link: function ($scope, element, attrs) {
        $scope.$watch("data.length", function( newValue, oldValue ) {
            if ( newValue === oldValue ) {
                console.log( "Should return..." );
                return; 
            }
            postpone = $timeout(function() {
                  $('#carousel').elastislide();                 
            }, 100);

        });
    }
};

});

【问题讨论】：

您的指令是否负责创建一些需要的 DOM 元素？如果您在 angular 指令中包含 html 标记，这将有助于澄清。更好的是，创建一个 jsbin.com 或 jsfiddle.net。
该 html 不包含在指令中，如您在上面的代码中所见。一般而言，我试图找到一种解决方案，仅在 DOM 完成加载后处理指令上的数据。
但是您必须在 html 中的某处调用该指令...我认为创建 jsbin.com 会有所帮助
对于这样的问题，您确实需要发布 plunker 或 JSFiddle。 data.length 来自哪里？？您还忘记将 $timeout 作为控制器函数的参数传递。听起来你需要一个回调函数或一个自定义事件在渲染后运行。如果将超时设置为 0，它会起作用吗？

标签： jquery angularjs angularjs-directive

【解决方案1】：

如果您需要 DOM 先渲染，请使用$timeout。

如果您只需要更新 DOM（但尚未渲染），请使用 $evalAsync。先试试这个，因为它可以防止闪烁。

【讨论】：

我没有找到像$evalAsync 这样的东西。这是 AngularJS 尖端新版本的一部分吗？还是已经被埋了？