Angular JS指令有后期渲染回调吗？

我刚刚得到了我的指令，可以插入一个模板以附加到其元素，如下所示：

# CoffeeScript
.directive 'dashboardTable', ->
  controller: lineItemIndexCtrl
  templateUrl: "<%= asset_path('angular/templates/line_items/dashboard_rows.html') %>"
  (scope, element, attrs) ->
    element.parent('table#line_items').dataTable()
    console.log 'Just to make sure this is run'

# HTML
<table id="line_items">
    <tbody dashboard-table>
    </tbody>
</table>

我还使用了一个名为DataTables的jQuery插件。它的一般用法是这样的：$（'table＃some_id'）。dataTable（）。您可以将JSON数据传递到dataTable（）调用中以提供表数据，或者您可以将数据存储在页面上，其余的将由数据完成。 。

但是问题是我必须在准备好DOM之后在table＃line_items上调用dataTable（）。我上面的指令在将模板附加到指令的元素之前，先调用dataTable（）方法。有没有一种方法可以在追加之后调用函数？

谢谢您的帮助！

安迪回答后的更新1：

我想确保链接方法仅在页面上的所有内容之后都被调用，因此我更改了指令进行了一些测试：

# CoffeeScript
#angular.module(...)
.directive 'dashboardTable', ->
    {
      link: (scope,element,attrs) -> 
        console.log 'Just to make sure this gets run'
        element.find('#sayboo').html('boo')

      controller: lineItemIndexCtrl
      template: "<div id='sayboo'></div>"

    }

而且我确实在div＃sayboo中看到了“ boo”。

然后我尝试我的jQuery数据表调用

.directive 'dashboardTable',  ->
    {
      link: (scope,element,attrs) -> 
        console.log 'Just to make sure this gets run'
        element.parent('table').dataTable() # NEW LINE

      controller: lineItemIndexCtrl
      templateUrl: "<%= asset_path('angular/templates/line_items/dashboard_rows.html') %>"
    }

那里没有运气

然后我尝试添加超时：

.directive 'dashboardTable', ($timeout) ->
    {
      link: (scope,element,attrs) -> 
        console.log 'Just to make sure this gets run'
        $timeout -> # NEW LINE
          element.parent('table').dataTable()
        ,5000
      controller: lineItemIndexCtrl
      templateUrl: "<%= asset_path('angular/templates/line_items/dashboard_rows.html') %>"
    }

那行得通。因此，我想知道非计时器版本的代码出了什么问题？

如果未提供第二个参数“ delay”，则默认行为是在DOM完成渲染之后执行该功能。因此，请使用$ timeout而不是setTimeout：

$timeout(function () {
    //DOM has finished rendering
});

我遇到了同样的问题，我相信答案确实是不。请参阅Miško的评论和小组中的一些讨论。

Angular可以跟踪它为操纵DOM而进行的所有函数调用均已完成，但是由于这些函数可能会触发异步逻辑，这些逻辑在返回后仍会更新DOM，因此我们不希望Angular知道它。任何回调角度给出了可能有时会工作，但不会是安全的依靠。

与您一样，我们使用setTimeout启发式解决了这一问题。

（请记住，并非所有人都同意我的意见-您应该阅读上面链接上的评论，然后看看您的想法。）

您可以使用“链接”功能（也称为postLink），该功能在放入模板后运行。

app.directive('myDirective', function() {
  return {
    link: function(scope, elm, attrs) { /*I run after template is put in */ },
    template: '<b>Hello</b>'
  }
});

如果您打算制定指令，请阅读此书，这对您有很大帮助：http : //docs.angularjs.org/guide/directive

尽管我的答案与数据表无关，但它解决了DOM操作和例如针对以异步方式更新其内容的元素上使用的指令的jQuery插件初始化的问题。

除了实现超时之外，您还可以添加一只手表来监听内容更改（甚至是其他外部触发器）。

在我的情况下，一旦ng-repeat创建了我的内部DOM，我就使用了这种变通方法来初始化jQuery插件；在另一种情况下，在控制器的scope属性更改之后，我仅使用它来操作DOM。这是我做的...

HTML：

<div my-directive my-directive-watch="!!myContent">{{myContent}}</div>

JS：

app.directive('myDirective', [ function(){
    return {
        restrict : 'A',
        scope : {
            myDirectiveWatch : '='
        },
        compile : function(){
            return {
                post : function(scope, element, attributes){

                    scope.$watch('myDirectiveWatch', function(newVal, oldVal){
                        if (newVal !== oldVal) {
                            // Do stuff ...
                        }
                    });

                }
            }
        }
    }
}]);

注意：不仅可以将myContent变量强制转换为my-directive-watch属性的布尔值，还可以想象在那里存在任意表达式。

注意：像上面的示例中那样，隔离范围只能对每个元素执行一次-尝试对同一元素使用多个指令将导致$ compile：multidir错误-请参阅：https : //docs.angularjs.org /错误/ $ compile / multidir

回答这个问题可能为时已晚。但是仍然有人可以从我的答案中受益。

我有类似的问题，在我的情况下，我不能更改指令，因为它是一个库，而更改该库的代码不是一个好习惯。所以我所做的就是使用变量来等待页面加载，并在html中使用ng-if等待呈现特定元素。

在我的控制器中：

$scope.render=false;

//this will fire after load the the page

angular.element(document).ready(function() {
    $scope.render=true;
});

在我的html中（在我的情况下html组件是一个画布）

<canvas ng-if="render"> </canvas>

我有同样的问题，但是使用Angular + DataTable和fnDrawCallback+ 行分组 + $ compiled嵌套指令。我将$ timeout放入了fnDrawCallback函数中以修复分页渲染。

在示例之前，基于row_grouping来源：

var myDrawCallback = function myDrawCallbackFn(oSettings){
  var nTrs = $('table#result>tbody>tr');
  for(var i=0; i<nTrs.length; i++){
     //1. group rows per row_grouping example
     //2. $compile html templates to hook datatable into Angular lifecycle
  }
}

后例：

var myDrawCallback = function myDrawCallbackFn(oSettings){
  var nTrs = $('table#result>tbody>tr');
  $timeout(function requiredRenderTimeoutDelay(){
    for(var i=0; i<nTrs.length; i++){
       //1. group rows per row_grouping example
       //2. $compile html templates to hook datatable into Angular lifecycle
    }
  ,50); //end $timeout
}

即使是短暂的超时延迟也足以使Angular呈现我的编译后的Angular指令。

对于我来说，没有一种解决方案可以接受使用超时的支持。这是因为我使用的模板是在postLink期间动态创建的。

但是请注意，超时可能为'0'，因为超时会将正在调用的功能添加到浏览器的队列中，该功能将在角度渲染引擎之后发生，因为该功能已在队列中。

请参考：http : //blog.brunoscopelliti.com/run-a-directive-after-the-dom-has-finished-rendering

这是在浅渲染后对动作进行编程的指令。由浅我的意思是呈现非常元素后，将评估，这将是无关的，当它的内容得到呈现。因此，如果需要一些子元素来执行后期渲染操作，则应考虑在此处使用它：

define(['angular'], function (angular) {
  'use strict';
  return angular.module('app.common.after-render', [])
    .directive('afterRender', [ '$timeout', function($timeout) {
    var def = {
        restrict : 'A', 
        terminal : true,
        transclude : false,
        link : function(scope, element, attrs) {
            if (attrs) { scope.$eval(attrs.afterRender) }
            scope.$emit('onAfterRender')
        }
    };
    return def;
    }]);
});

那么您可以执行以下操作：

<div after-render></div>

或任何有用的表达式，例如：

<div after-render="$emit='onAfterThisConcreteThingRendered'"></div>

我使用以下指令进行此操作：

app.directive('datatableSetup', function () {
    return { link: function (scope, elm, attrs) { elm.dataTable(); } }
});

在HTML中：

<table class="table table-hover dataTable dataTable-columnfilter " datatable-setup="">

如果上述方法对您不起作用，请排除故障。

1）请注意，“ datatableSetup”等效于“ datatable-setup”。Angular将格式更改为驼峰式大小写。

2）确保在指令之前定义了app。例如简单的应用程序定义和指令。

var app = angular.module('app', []);
app.directive('datatableSetup', function () {
    return { link: function (scope, elm, attrs) { elm.dataTable(); } }
});

遵循无法预期的装载顺序这一事实，可以使用一种简单的解决方案。

让我们看一下指令与“指令用户”的关系。通常，指令的用户会向指令提供一些数据，或者使用指令提供的某些功能（函数）。另一方面，该指令希望在其范围内定义一些变量。

如果我们可以确保所有参与者在尝试执行这些动作之前都已满足其所有动作要求，那么一切应该都很好。

现在，该指令：

app.directive('aDirective', function () {
    return {
        scope: {
            input: '=',
            control: '='
        },
        link: function (scope, element) {
            function functionThatNeedsInput(){
                //use scope.input here
            }
            if ( scope.input){ //We already have input 
                functionThatNeedsInput();
            } else {
                scope.control.init = functionThatNeedsInput;
            }
          }

        };
})

现在是指令html的用户

<a-directive control="control" input="input"></a-directive>

在使用该指令的组件控制器中：

$scope.control = {};
...
$scope.input = 'some data could be async';
if ( $scope.control.functionThatNeedsInput){
    $scope.control.functionThatNeedsInput();
}

就是这样 有很多开销，但是您可能会丢失$ timeout。我们还假定使用该指令的组件在该指令之前被实例化，因为我们依赖于在实例化指令时存在的控制变量。