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);