Question

我附上了一个显示问题的小提琴：http://jsfiddle.net/dxande6/nEYhD/50/

HTML：

<div ng-controller="PersonalSettingsController">
    <div class="wrapper">
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <phone-button>Add Button</phone-button>
        <br/>
        <br/>
        <br/>
    </div>
</div>

角度代码：

var app=angular.module("myApplication", []);

app.controller('PersonalSettingsController', function($scope, $http) {

    $scope.phoneOptionButtons = [
        {name:'CVOIP'},
        {name:'Home'},
        {name:'Cell'},
        {name:'Work'}
    ];


});

app.directive('phoneButton', function($compile) {
  return {
    restrict: 'EAC',
    scope: {
      key: '=',
      pi: '=',
      ci: '='
    },
    template: "<button class='rule-button' type='button' change-modal></button>",
    link: function(scope, elements, attrs) {
      elements.bind('click', function() {});
    }
  }
});

app.directive('changeModal', function($compile) {
  return {
    restrict: "A",
    link: function(scope, element, attrs) {
            var html =     "<div id='who-cares'>" +
                            "<button ng-click='addOption(pob.name, $index)' class='rule-option' ng-repeat='pob in $parent.phoneOptionButtons'>" +
                                "<div class='{{ pob.name | lowercase }}' name='{{pob.name}}' index='{{$index}}'>{{ pob.name }}</div>" +
                            "</button>" +
                        "</div>";
      var popOverContent = $compile(html)(scope);
      var options = {
        trigger: 'click',
        content: popOverContent,
        placement: "top",
        html: true
      };

      $(element).popover(options);

      scope.addOption = function(name, index) {
        // Get index based on name, allows us to re-use
        for (var i = 0; i < scope.$parent.phoneOptionButtons.length; i++) {
            if (scope.$parent.phoneOptionButtons[i].name === name) {
                scope.$parent.phoneOptionButtons.splice(i, 1);
                break;
            }
        }
      }
    }
  };
});

CSS：

.wrapper {
    text-align: center;
}

.button {
    position: absolute:
    top: 50%;
}

单击其中一个按钮，将显示一个引导程序弹出窗口。我有一个带有动态内容的bootstrap popover，在这种情况下是4个按钮。如果单击其中一个弹出框，则会从弹出框中删除它。请注意，弹出窗口的位置不再位于按钮的正上方。

现在点击按钮删除弹出窗口。再次单击它。现在，popover正好位于按钮上方。

有没有办法，当你点击popover中的一个按钮时，它会自动重新定位在按钮上（居中）？

这已经给我带来了很长一段时间的麻烦，我似乎无法解决它。任何帮助表示赞赏。

-Dean

bootstrap popover - 删除动态内容后重新定位

0 个答案: