如何动态更新angular-ui(bootstrap)popover内容

时间:2016-01-14 16:47:19

标签: angularjs twitter-bootstrap angular-ui popover

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

我遗漏了某些内容,还是需要重新定义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 />'));
};

1 个答案:

答案 0 :(得分:3)

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;
    }
}