Popover AngularJs 快速消失

Question

'Thanks'弹出窗口在第一次尝试时运行良好，但在后续尝试中它很快消失。

我最初使用 uib-popover 并将其模板设置为带有简单输入文本和按钮的 <div>。然后单击提交，我再次将模板设置为简单的“Thanks”<div>。它在第一次尝试时显示良好，但在后续尝试中很快消失。

请注意，4 对拇指是由 ng-repeat 渲染的，并且使用索引

隔离了对项目进行的每个操作

快速查看相关代码：

不赞成的标记：

<span class="feedback-separator">|</span>
<span
   uib-popover-template="this.templates[result.id]"
   popover-trigger="'outsideClick'"
   ng-class="{
         'feedback-down-unselected' : !this.feedbackIsBadCollection[result.id],
         'feedback-down-selected' : this.feedbackIsBadCollection[result.id],
         'no-hover' : this.feedbackUpTogglerList[result.id] || this.feedbackIsBadCollection[result.id] 
   }"                       
>
</span>

弹出框模板：

<div>
   <p>{{ this.subTitle }}</p>
   <input type="text" ng-model="reason" />
   <br />
   <button ng-click="this.submit(reason, result.id)">Submit</button>
</div>

控制器代码：

$scope.submit = (reason, id) => {
    $scope.templates[id] = $sce.trustAsResourceUrl("thanks.html");
    $scope.sendFeedback(true, id, reason);
}

Answer 1

我们只需要在切换到“thanks.html”之前添加一些 50 毫秒的延迟。当您更改内容弹出窗口时，随着内容的更改，js 需要时间重新计算元素的位置。

在切换到 thanks.html 之前添加 $timeout。

feedbackApp.controller('feedbackCtrl', function ($scope, $sce, $timeout) {

$timeout(function () {
            $scope.templates[id] = $sce.trustAsResourceUrl("thanks.html");
        }, 50);

Popover AngularJs 快速消失

Popover AngularJs quickly disappearing

popover

angularjs

angular-ui-bootstrap