javascript - AngularJS 弹出窗口不显示内容 : Rendered Too Early

Question

在我的 AngularJS Controller 中，我调用了我的数据服务方法，它生成了一个 $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

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

<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