чи є зворотний виклик після візуалізації для кутової директиви 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>

Я також використовую плагін jQuery під назвою DataTables. Загальне його використання виглядає так: $ ('table # some_id'). DataTable (). Ви можете передати дані JSON у виклик dataTable () для надання даних таблиці АБО ви можете мати дані вже на сторінці, і це зробить все інше. Я роблю останнє, маючи рядки вже на сторінці HTML .

Але проблема полягає в тому, що я повинен викликати таблицю даних () у таблиці # line_items ПІСЛЯ DOM готової. У моїй директиві вище виклик методу 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.

Потім я спробую свій дзвінок з даних, що передається 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') %>"
    }

І це працює. Тож мені цікаво, що піде не так у нетаймерній версії коду?

Якщо другий параметр "затримка" не передбачений, поведінка за замовчуванням полягає у виконанні функції після завершення надання DOM. Тому замість setTimeout використовуйте $ timeout:

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

У мене була така ж проблема, і я вважаю, що відповідь насправді - ні. Дивіться коментар Мішко та деяку дискусію в групі .

Angular може відстежувати, що всі виклики функції, які він робить для маніпуляції з DOM, є завершеними, але оскільки ці функції можуть викликати логіку асинхронізації, яка все ще оновлює DOM після повернення, Angular не могло очікувати про це. Будь-який зворотний виклик, який надає Angular, може працювати іноді, але на нього не можна покластися.

Ми вирішили це евристично за допомогою setTimeout, як і ви.

(Будь ласка, майте на увазі, що не всі погоджуються зі мною - ви повинні прочитати коментарі за посиланнями вище і подивитися, що ви думаєте.)

Ви можете використовувати функцію "link", також відому як 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 для директив, що використовуються для елементів, які оновлюють їх вміст асинхронним способом.

Замість впровадження тайм-ауту можна просто додати годинник, який прослухає зміни вмісту (або навіть додаткові зовнішні тригери).

У моєму випадку я використав це рішення для ініціалізації плагіна jQuery, як тільки було виконано ng-повтор, який створив мій внутрішній DOM - в іншому випадку я використовував його для простого маніпулювання 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 в bool за атрибутом my-direktive-watch, можна було б уявити будь-яке довільне вираження.

Примітка: Ізоляція області, як у наведеному вище прикладі, може бути виконана лише один раз на кожен елемент - спроба зробити це за допомогою декількох директив одного і того ж елемента призведе до компіляції $: помилка multidir - див .: https://docs.angularjs.org / помилка / $ compile / multidir

Може запізнитися, щоб відповісти на це питання. Але все-таки хтось може отримати користь з моєї відповіді.

У мене був подібний випуск, і в моєму випадку я не можу змінити директиву, оскільки це бібліотека, а зміна коду бібліотеки - не надто хороша практика. Тож, що я зробив, це використовувати змінну для очікування завантаження сторінки та використання ng-if всередині мого html-файлу, щоб чекати надання конкретного елемента.

У моєму контролері:

$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+ групуванням рядків + $, складеними вкладеними директивами. Я помістив $ timeout у своїй fnDrawCallbackфункції, щоб виправити візуалізацію сторінки.

Перед прикладом на основі джерела_груповання рядків:

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" є еквівалентом "налаштування даних". Кутовий змінює формат у корпус верблюда.

2) переконайтеся, що додаток визначено перед директивою. наприклад, просте визначення програми та директива.

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. Ми також припускаємо, що компонент, який використовує директиву, є екземпляром перед директивою, оскільки ми залежаємо від змінної управління, яка існуватиме при створенні директиви.