为了显示一些用户信息,我使用了一个指令来捕获单击事件以显示 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 仅渲染了几次,而在其他情况下我可以看到 Angular 标 checkout 现。编译器输出似乎没有及时呈现。为了解决这个问题,我找到了一个使用超时的解决方案,如下面的代码所示。
...
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
}
...
我的问题是,我发现这个解决方案不是非常有效,我想知道是否有更好的替代方法。任何帮助将不胜感激。
最佳答案
$timeout(this.set('content.text', 已编译), 100);
你的超时函数是错误的,因为它会立即执行。但它之所以有效,是因为缺少的部分是启动 Angular 摘要进程来更新 GUI,因为 qTip 在 Angular 生命周期之外运行。 $timeout
将隐式调用 digest
函数。
试试这个:
this.set('content.text', compiled)l
scope.$digest();
超时函数的正确实现:
var that = this;
$timeout(function() {
that.set('content.text', compiled);
}, 100);
关于javascript - 带有 qtip 的 Angular 动态模板,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33123828/