带Qtip的角度动态模板

Question

To display some user information I am using a directive that captures the click event to display a qTip tooltip. As I am already using angular, to render the HTML I am using $compile to render the 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'
                }
            });
        }
    };
});

The problem is that the HTML is only rendered some times while in other cases I can see the angular tags coming. It seemed that compiler output was not rendered at time. To solved, I found a solution using a timeout like it shows in the code below.

...
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
}
...

My problem is that I do not find this solution very efficient and I would like to know if there is a better alternative to this approach. Any help would be appreciated.

Answer 1

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

Your timeout function is wrong, as it will execute immediately. But it works because the missing part is to start an angular digest process to update the GUI, because qTip is running outside the angular lifecycle. $timeout will implicitly call the digest function.

Try this:

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

Correct implementation of your timeout function:

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