qtip角度动态模板

Question

要显示一些用户信息我正在使用捕获单击事件的指令来显示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的进程来更新GUI，因为qTip在角度生命周期之外运行。 $timeout将隐含地调用digest函数。

试试这个：

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

正确地执行你的超时功能：

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