компиляции директивы внутри другой директивы в нг-если

Question

я создал пример plnkr: http://plnkr.co/edit/kcclSc10nPB8Qzm3qr7s?p=preview

там вы можете увидеть, что есть директива, которая добавляет еще одну директиву в функции компиляции, которая работает хорошо, если есть нет ng-if на родителях div. как только ng-if есть, вторая директива больше не работает. Он работает с ng-show.

Моим реальным сценарием является то, что мне нужно добавить всплывающую подсказку на некоторых кнопках. Мы используем всплывающую подсказку, которая отображает текст. Текст, который будет отображаться, мы получаем из бэкэнд на основе ключа. Поэтому не нужно проходить через все контроллеры, чтобы вызвать службу, чтобы получить текст на основе ключа, а затем добавить текст в область действия и передать его в директиву всплывающей подсказки.

Одна из кнопок - кнопка ok, в которой atm является только изображением галочки. Только эта кнопка появляется в 72 файлах, поэтому изменить все вручную не было. Поэтому я искал class="acceptbtn" в коде, и я заменил его новым директивным именем и class="acceptbtn". Итак, теперь все кнопки имеют мою директиву, которая получает ключ. Внутри моей директивы я получаю текст на основе ключа, который я передаю, и добавляю к этому элементу директиву подсказки с текстом, который я получаю.

Это хорошо работает в некоторых случаях. Проблема в том, что она не работает, если есть обертка div с ng-if. Поиск всех ng-if s во всех этих файлах также не был бы вариантом (если нет другого варианта).

Итак, есть ли способ исправить это? Значение, в plnkr, третий div должен выглядеть как второй. Благодаря

Answer 1

Работа Plunkr

app.directive('dir1', function($compile){ 
return{ 
    restrict: 'A', 
    link: function(scope, element, attrs) { 
     element.removeAttr('dir1'); 
     element.attr('dir2', ''); 
     $compile(element)(scope); 
     } 
} 
}); 

app.directive('dir2', function($compile){ 
return { 
    restrict: 'A', 
    link: function(scope, element, attrs) { 
     element.removeAttr('dir2'); 
     element.attr('style', "width:400px"); 
     $compile(element)(scope); 
    } 
    }; 
}); 

Я слегка модифицирована ваши директивы, с помощью функции связи. Лично я использую только компиляцию, когда есть изменения времени выполнения в моих шаблонах директив.