2016-08-22 5 views
0

Я использую $compile для компиляции директивы «на лету». Я хотел бы знать, есть ли способ обнаружить, когда директива выполняется компиляцией (обещание?), Чтобы я мог добавить ее в DOM. Я хочу сделать что-то вроде этого:AngularJS обнаруживает, когда выполняется компиляция HTML-строки

function newMessage() { 
    var directive = $compile("<div select-contacts message=\"newShare\"></div>"); 

    // Compile directive 
    directive($scope).then(function(compiled) { 
     // After compiling, append it somewhere in the DOM 
     angular.element('#new_message').html(compiled); 
    }); 
} 

Я искал документацию $compile, и я до сих пор не ясно, о том, как сделать что-то вроде этого, или, если это вообще возможно.

Update

Вот что я в настоящее время. Это работает на localhost с тайм-аутом, установленным в 0, однако при его производстве он работает только при вводе задержки более 50 мс. У меня есть 250 мс, чтобы быть в безопасности, но это кажется произвольным.

function newMessage() { 
    angular.element('#new_message_container').html($compile("<div select-contacts message=\"newShare\"></div>")($scope)); 
    $timeout(function() { 
     angular.element('#new_message').html(compiled); 
      content: angular.element('#new_message'), 
      elem: angular.element('#new_message_container'), 
      width: '1024px', 
      height: '480px' 
     }); 
    }); 
} 

В основном у меня есть контейнерный элемент, который скрыт. Я компилирую директиву и помещаю ее в скрытый контейнер. Затем в течение тайм-аута я открываю модальный элемент, который перемещает элемент директивы root из скрытого контейнера в модальный элемент. Когда я запускаю это на localhost, он работает. Модаль открывается, и директива уже скомпилирована. При производстве директива кажется не завершенной компиляцией до того, как вызывается код в блоке тайм-аута. Эффект заключается в том, что модальный открывается, но пуст.

+0

* «Затем в течение тайм-аута я открываю модальный, который перемещает элемент директивы root из скрытого контейнера в модальный элемент« *, так что в основном у вас есть другое «событие», чтобы подождать? если это так, вы можете использовать два $ timeout calls или использовать директиву – Luxor001

ответ

0

Ждать компиляции, чтобы закончить и быть применен к йоту, за $ таймаут в 0 должен быть достаточен для всех ваших потребностей:

function newMessage() { 
    var directive = $compile("<div select-contacts message=\"newShare\"></div>"); 

    // Compile directive 
    $timeout(function(){ 
     angular.element('#new_message').html(compiled); 
    }, 0); 
} 

Тайма-аут при 0 выполняет свою внутреннюю функцию в следующем угловой цикл дайджеста: другими словами, сразу после выполнения привязок (и, следовательно, все элементы dom компилируются и вводятся в dom).

+0

Я только что обновил свой вопрос с некоторыми дополнительными деталями. Я попробовал ваше решение, и он работает на localhost, но не на производстве по какой-то причине. – ACIDSTEALTH