AngularJS中修改content值后popover弹窗内容未更新问题

问题根因 #

Bootstrap popover 组件初始化完成后，后续重复对同一个 DOM 元素调用 popover() 方法传入新配置，不会覆盖已缓存的实例配置，因此更新后的 content 无法同步到已有的 popover 上。

修复方案 #

方案一：销毁重建（适配所有Bootstrap版本，改动最小） #

每次触发事件时先清除已有的 popover 实例，再用最新内容重新初始化：

$scope.noteContent = function (content, element) {
    var __popOverNoteHTML = `<div class="as-vc" >${content}</div>`
    var currentElement = $(element.target);
    var noteHover = $(currentElement).parents("#note-hover");
    
    // 销毁已有popover实例，清除旧内容缓存
    // Bootstrap 3 请替换为 $(noteHover).popover('destroy')
    $(noteHover).popover('dispose');
    
    // 用最新内容初始化popover
    $(noteHover).popover({
        content: __popOverNoteHTML,
        animation: true,
        placement: "left",
        html: "true",
        container: "body",
        trigger: "hover"       
    });
    // 手动触发显示，解决首次hover不生效的问题
    $(noteHover).popover('show');
}

方案二：直接更新已有实例内容（性能更优） #

判断是否存在已初始化的popover实例，存在则直接更新内容，避免重复销毁重建：

$scope.noteContent = function (content, element) {
    var __popOverNoteHTML = `<div class="as-vc" >${content}</div>`
    var currentElement = $(element.target);
    var noteHover = $(currentElement).parents("#note-hover");
    // 获取已有popover实例
    // Bootstrap 3 请替换为 var popoverInstance = $(noteHover).data('bs.popover')
    var popoverInstance = bootstrap.Popover.getInstance(noteHover[0]);

    if (popoverInstance) {
        // 直接更新已有实例的内容
        popoverInstance.setContent({
            '.popover-body': __popOverNoteHTML
        })
    } else {
        // 无实例则首次初始化
        $(noteHover).popover({
            content: __popOverNoteHTML,
            animation: true,
            placement: "left",
            html: "true",
            container: "body",
            trigger: "hover"       
        });
    }
    $(noteHover).popover('show');
}

注意事项 #

• 对应Bootstrap版本选择适配的API，避免调用报错
• 避免对同一个DOM元素重复初始化popover，减少内存占用

内容的提问来源于stack exchange，提问作者Ashu Sharma