Question

我正在创建一个动态创建twitter bootstrap popover的角度指令：

app.directive("detailsPopup", function () {
return {
    restrict: 'E',
    scope: { items: '='},
    template: '<i ng-click="onClick($event)">click me</i>',
    link: function(scope, element, attrs) {
        scope.onClick = function(e) {
            var html
            // with ng-repeat:
            html = '<div ng-repeat="item in items">{{item}}</div>';
            // without ng-repeat:
            //html = '<div>AAA</div><div>BBB</div><div>CCC</div><div>DDD</div>';
            $(e.target).popover({
                trigger: "manual", content: function() {                           
                    return $compile(html)(scope);
                }, html: true
            }).popover("show")
        };
    }

使用ng-repeat时，弹出窗口未正确定位。当它不使用时，一切正常。为什么ng-repeat导致不必要的定位副作用？任何想法如何解决？

这是小提琴：http://jsfiddle.net/vfw4v0Le/

更新：不想使用额外的库（AngularUI），以下方法对我有用：

app.directive("detailsPopup", function () {
return {
    restrict: 'E',
    scope: { items: '='},
    template: '<i ng-click="onClick($event)">click me</i>' +
        '<div class="hidden"><div ng-repeat="item in items">{{item.name}}</div></div>',
    link: function(scope, element, attrs) {
        scope.onClick = function(e) {
            $(e.target).popover({
                    trigger: "manual", content: function() {
                        return $(e.target).next("div").clone(true).removeClass("hidden")
                    }, html: true
                }).popover("show")
        };
    }
}});

因此，我们在构建主页面时评估整个弹出窗口内容，只是将其隐藏起来。在显示弹出窗口时，我们正在克隆相关内容。

Answer 1

在ng-repeat的情况下，弹出窗口会在呈现内容之前显示，因为它是动态的。因此，弹出窗口（使用左上角坐标）就好像它是空的一样，然后出现内容，使其位置不正确。 Angular UI Bootstap project 包含 directive for Bootstrap popovers 。根据{{3}}，重新定位popover以适应动态内容并非易事。你最好直接使用他们现成的指令。

ng-repeat导致不必要的定位副作用

1 个答案: