AngularJS popover未显示内容:渲染太早

AngularJS popover not showing content: Rendered Too Early

本文关键字：太早 popover 显示 AngularJS      更新时间：2024-06-30

在我的AngularJS控制器中，我调用我的数据服务方法，该方法进行$http调用以获取页面显示所需的数据。

appDataService.getById()
  .success(function(document) {
      vm.document = document;
  }
  .error(function(e)){});

一切都显示得很好，当切换/点击时，我的大多数弹出窗口都能正确显示它们的内容。然而，我对其中一个弹出窗口有问题。

    <button popover-directive
            popover-placement="auto"
            popover-content="{{ vm.document.content }}"
            popover-label="Click to View Text "
            class="btn btn-info btn-xs">
    </button>

我检查了HTML，可以确认popover-content被赋予了正确的字符串值。然而，当我点击它时，预期的触发弹出行为并没有发生，

即没有出现新的CCD_ 3。

如果给popover-content一个直接值，如popover-content="testing"，则popover工作正常，并在单击时显示内容。

我强烈怀疑这是由于我的数据获取的异步行为造成的；我的数据没有及时返回以便正确初始化我的popover。

很明显，我的popover指令正在正常运行，我不认为问题出在它身上，但为了全面了解情况，我提供了我的popoverdirective如下：

function popoverDirective ($document) {
    return {
      restrict: 'A',
      template: '<span>{{label}}</span>',
      link: function (scope, element, attrs) {
        scope.label = attrs.popoverLabel;
        $(element).popover({
          trigger: 'click',
          html: true,
          content: attrs.popoverContent,
          placement: attrs.popoverPlacement
        });
      }
    };
  }

有什么解决方案吗？非常感谢。

由于指令属性是插值的，请考虑将其更改为：

<button popover-directive
        popover-placement="auto"
        popover-content="{{vm.document.content}}"  <!-- Change at this line -->
        popover-label="Click to View Text "
        class="btn btn-info btn-xs">
</button>

此外，由于vm.document.content是通过promise解决的，因此您需要注册一个观察器：

function popoverDirective ($document) {
    return {
      restrict: 'A',
      template: '<span>{{label}}</span>',
      link: function (scope, element, attrs) {
        function initPopover() {
            scope.label = attrs.popoverLabel;
            // Make sure to remove any popover before hand (please confirm the method)
            $(element).popover("destroy");
            $(element).popover({
              trigger: 'click',
              html: true,
              content: attrs.popoverContent,
              placement: attrs.popoverPlacement
            });
        }
        attrs.$observe("popoverContent", initPopover);
      }
    };
  }

注意如果使用Bootstrap，请删除bootstrap.min.js，也可以删除jQuery。Angular UI团队已经移植了Bootstrap Javascript来支持Angular。看看这个http://angular-ui.github.io/bootstrap

您是否考虑过使用promise而不是直接从服务返回？这里的目标是，函数是否立即返回并不重要，因为当异步值可用时，promise将更新为包含该值。

您可以更新服务本身以使用promise，如果成功则使用值解析promise，或者如果出现错误则拒绝它。在该函数的接收端，当promise以某种方式得到解决时，作用域上的值将更新。

相关文章：