AngularJS 弹出框未显示内容：渲染过早

Question

在我的 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 被赋予了正确的字符串值。然而，当我点击它时，预期的触发弹出行为并没有发生，

即没有出现新的<div class="popover fade right in">。

如果 popover-content 被赋予直接值，例如 popover-content="testing"，popover 将正常工作并在单击时显示内容。

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

很明显，我的 popover 指令正常运行，我认为问题不在于它，但为了完整起见，我提供如下的 popover 指令：

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

有什么解决办法吗？谢谢！

Answer 1

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

您可以更新服务本身以利用承诺，如果成功则使用值解决承诺，如果出现错误则拒绝它。在此函数的接收方，当以某种方式解决承诺时，作用域上的值将更新。

Answer 2

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

<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 是通过承诺解决的：

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

AngularJS 弹出框未显示内容：渲染过早

AngularJS popover not showing content: Rendered Too Early

javascript

jquery

angularjs

popover