如何动态更新 angular-ui (bootstrap) 弹出框内容答案

【问题标题】：How to update angular-ui (bootstrap) popover content dynamically如何动态更新 angular-ui (bootstrap) 弹出框内容
【发布时间】：2016-01-14 16:47:18
【问题描述】：

我正在尝试使用“dacc.getSearchResultHTML()”函数动态绑定“uib-popover-title”来更改弹出框的内容，但更新“dacc.codeJerarchy.parent”对象只会更改弹出框的标题。

我遗漏了什么还是需要重新定义 HTML 元素？这是我目前更新内容的唯一方法。

谢谢！

<button uib-popover-html="'{{ dacc.getSearchResultHTML(dacc.codeJerarchy.parent) }}'"
popover-title="{{ dacc.codeJerarchy.parent.short }}"
popover-placement="right"
popover-append-to-body="true" type="button"
class="btn btn-sm btn-default">i</button>

//-------------------------------------------

dacc.getSearchResultHTML = function(searchResult) {
    return $sce.trustAsHtml(he.encode(he.escape(searchResult.long)).replace(/\n/g, '<br />'));
};

【问题讨论】：

标签： angularjs twitter-bootstrap angular-ui popover

【解决方案1】：

uib-popover-html 采用角度表达式，没有必要用双花括号包裹你的函数调用。相反，在 $scope 对象上传递一个变量/函数。

HTML

<button type="button" class="btn btn-sm btn-default"
    uib-popover-html="dacc.getSearchResultHTML(dacc.codeJerarchy.parent)"
    popover-title="{{ dacc.codeJerarchy.parent.short }}"
    popover-placement="right"
    popover-append-to-body="true"        
    >
    i
</button>

控制器

$scope.dacc = {
    getSearchResultHTML: function(input) {
        ...
        return output;
    }
}

【讨论】：