Javascript 基于qtip的动态角度模板

为了显示一些用户信息，我使用了一个捕获单击事件的指令来显示工具提示。由于我已经在使用angular来呈现HTML，所以我正在使用angular来呈现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'
                }
            });
        }
    };
});

.directive（'myDirective'，函数（$compile，$timeout）{
返回{
限制：“AE”，
链接：函数（范围、元素、属性）{
//打开qTip弹出窗口
元素qtip({
内容：{
阿贾克斯：{
url:“/myurl”，
键入：“GET”，
数据类型：“json”，
成功：功能（数据、状态）{
//联系人全名
scope.FullName=data.contact.Forename+“”+data.contact.姓氏；
var myelement=angular.element（'[[FullName]]
'）；
var compiled=$compile（myelement）（范围）；
此.set（'content.text'，已编译）
}
}
},
显示：“单击”，
风格：{
类：“qtip引导”
},
隐藏：{
事件：“未聚焦”
}
});
}
};
});

问题是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
}
...

。。。
成功：功能（数据、状态）{
//联系人全名
scope.FullName=data.contact.Forename+“”+data.contact.姓氏；
var myelement=angular.element（'[[FullName]]
'）；
var compiled=$compile（myelement）（范围）；
$timeout（this.set（'content.text'，compiled），100）；//延迟100毫秒
}
...

我的问题是，我觉得这个解决方案不是很有效，我想知道是否有更好的替代方法。任何帮助都将不胜感激。

$timeout（this.set（'content.text'，compiled），100）

您的超时函数是错误的，因为它将立即执行。但是它可以工作，因为缺少的部分是启动angular
摘要
过程来更新GUI，因为qTip在angular生命周期之外运行
$timeout
将隐式调用
摘要
函数

试试这个：

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

超时功能的正确实现：

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

是的，这对我很有效，非常感谢你的解释。实际上，我花了一些时间试图弄明白$compile为什么不起作用，现在它是有意义的。