Question

要显示一些用户信息，我正在使用捕获click事件的指令来显示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

sed 's/^/- /;s/$/ /;s/$[^[:blank:]]\{1,\}$[[:blank:]]\{1,\}$[^[:blank:]]\{1,\}[[:blank:]]$/\1|\2/g;s/..//;s/.$//' YourFile

你的超时功能错误，因为它会立即执行。但它的工作原理是因为缺少的部分是启动角度$timeout(this.set('content.text', compiled), 100);进程来更新GUI，因为qTip在角度生命周期之外运行。 digest会隐式调用$timeout函数。

试试这个：

digest

正确执行超时功能：

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

带有qtip的角度动态模板

1 个答案: