AngularJS弹出窗口不显示内容：渲染太早答案

【问题标题】：AngularJS popover not showing content: Rendered Too EarlyAngularJS弹出窗口不显示内容：渲染太早
【发布时间】：2016-04-15 03:53:05
【问题描述】：

在我的 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
        });
      }
    };
  }

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

【问题讨论】：

标签： javascript jquery angularjs popover

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

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

【讨论】：

回复。添加大括号{{ }}，这是仅在问题中出现的错字，对此感到抱歉！我的实际代码确实包含括号，并且我已经更新了我的问题以包含括号。我会检查你其余的答案，然后回复你，ty，@Shashank Agrawal
我实际上知道angular-ui（也就是说，甚至在我阅读您的答案之前）。我是在编写自己的指令后才发现的（如上所述）。由于我并不真正需要angular-ui（只是几个）提供的许多功能，因此我选择不移植到angular-ui，尤其是因为它们或多或少都在工作，哈哈。 @Shashank Agrawal
这对我来说是完美的，@Shashank Agrawal。谢谢！没想到用$observe。很棒的提示，真的！

【解决方案2】：

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

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

【讨论】：

我的服务实际上是在使用一个承诺！ >_