AngularJS popover没有显示内容:渲染太早

时间:2016-04-15 03:53:05

标签: javascript jquery angularjs popover

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

任何解决方案?谢谢!

2 个答案:

答案 0 :(得分:1)

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

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

答案 1 :(得分: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