Динамический шаблон в угловых с qtip

Question

Для отображения некоторой пользовательской информации я использую директиву, которая фиксирует событие click для отображения всплывающей подсказки qTip. Поскольку я уже использую angular, для рендеринга HTML я использую $ compile для рендеринга HTML.

.directive('myDirective', function ($compile, $timeout) {
    return {
        restrict: 'AE',
        link: function (scope, element, attrs) {
            // Open qTip popup
            element.qtip({
                content: {
                    ajax: {
                        url: '/myurl',
                        type: 'GET',
                        dataType: 'json',
                        success: function (data, status) {
                            // Contact full name
                            scope.FullName = data.contact.Forename + ' ' + data.contact.Surname;

                            var myelement = angular.element('<p>[[ FullName ]]</p>');
                            var compiled = $compile(myelement)(scope);

                            this.set('content.text', compiled)
                        }
                    }
                },
                show: 'click',
                style: {
                    classes: 'qtip-bootstrap'
                },
                hide: {
                    event: 'unfocus'
                }
            });
        }
    };
});

Проблема в том, что HTML отображается только несколько раз, а в других случаях я вижу появление угловых тегов. Казалось, что вывод компилятора не был обработан вовремя. Чтобы решить, я нашел решение, используя тайм-аут, как показано в коде ниже.

...
success: function (data, status) {
  // Contact full name
  scope.FullName = data.contact.Forename + ' ' + data.contact.Surname;

  var myelement = angular.element('<p>[[ FullName ]]</p>');
  var compiled = $compile(myelement)(scope);

  $timeout(this.set('content.text', compiled), 100); // delay 100 ms
}
...

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

Answer 1

$timeout(this.set('content.text', compiled), 100);

Ваша функция тайм-аута неверна, так как она будет выполнена немедленно. Но это работает, потому что недостающая часть должна начать угловой digest процесс обновления графического интерфейса, потому что qTip работает за пределами жизненного цикла. $timeout будет неявно вызывать digest функция.

Попробуй это:

this.set('content.text', compiled)l
scope.$digest();

Правильная реализация функции тайм-аута:

var that = this;
$timeout(function() {
    that.set('content.text', compiled);
}, 100);