0

我正在尝试设置一个指令来包装引导弹出组件。我的问题是让链接功能等待我的详细信息列表被插值。

为此，这是我的 HTML：

<div class="popover fade top in">
    Blah blah
    <br />
    <span ng-repeat="detail in details" >
        {{ detail.title }}
    </span>
</div>

<div my-popover>
    My text line that opens the popover on mouseover.
</div>

我的指令：

portalModule.directive('myPopover', function ($compile, $interpolate) {
    return {
        restrict: 'A',
        replace : false,
        link: function (scope, element, attributes) {
            var updateLater = function () {
                var popoverHtml = $(element).siblings('.popover').html();

                var options = {
                    html: true,
                    trigger: 'hover',
                    content: popoverHtml
                };

                $(element).popover(options);
            }

            setTimeout(updateLater, 2000);
        }
    }
});

这是目前我发现使其工作的最佳（唯一）方法。
- 我尝试使用 $watch 但找不到如何让它等待整个“详细信息”列表被插值。
- Angular.UI 似乎还没有管理丰富的（html）弹出框。

关于如何管理它的任何想法/线索？

[编辑] 这是我的问题的一个 plunker ( http://plnkr.co/edit/Rn2SBaiGNz4mj0F80IT3
)： - 一个新的解决方案（在用户鼠标悬停时延迟创建弹出框）
- 一个保持 KO 的帖子链接

4

2 回答 2

1

我刚刚遇到了类似的情况。我使用了与您类似的解决方案，但只使用了 $timeout 服务。我相信作为参数传递的函数内的代码将在下一个摘要之后运行，因此您无需等待 2 秒。

  $timeout(function() {
..this will run after interpolation
}

这是您使用此技术的代码

portalModule.directive('myPopover', function ($timeout) {
    return {
        restrict: 'A',
        replace : false,
        link: function (scope, element, attributes) {
            $timeout(function () {

                var popoverHtml = $(element).siblings('.popover').html();

                var options = {
                    html: true,
                    trigger: 'hover',
                    content: popoverHtml
                };

                $(element).popover(options);
            });
        }
    }
});
于 2014-08-13T10:26:49.990 回答
1

我比我将要介绍的更喜欢你的新解决方案......但让它工作的另一种方法是eventOnLast向你的 ng-repeat 添加一个指令 () 来检查$last，然后发送一个myPopoverLink指令事件可以听：

<li ng-repeat="detail in details" event-on-last>


myModule.directive('eventOnLast', function($rootScope) {
  return function(scope, element) {
    if(scope.$last === true) {
      element.ready(function () {
        console.log('broadcast');
        $rootScope.$broadcast('event:interpolationDone');
      })
    }
  }
})
myModule.directive('myPopoverLink', function ($compile, $interpolate) {
    return function (scope, element) {
      scope.$on('event:interpolationDone', function() {
        console.log('event');
        doPopover(element);
      })
    }
});

普朗克

element.ready()是需要的，以便进行{{ detail.title }}插值。

另外，在您的 plunker 中，我注意到您在 jQuery 之前包含了 Angular。如果您希望 Angular 使用 jQuery（而不是其内置的 jqLit​​e），则必须首先包含 jQuery。

于 2013-07-05T16:19:32.680 回答