gpt4 book ai didi

javascript - 如何动态更新弹出内容 AngularJS Bootstrap

转载 作者:行者123 更新时间:2023-11-30 09:43:51 26 4
gpt4 key购买 nike

我使用自定义的 AngularJs 指令来创建 Bootstrap 弹出窗口,但是当制作弹出窗口时,弹出窗口的内容无法更改并且已修复。

 app.directive('nextLevel', function () {
return {
restrict: 'EA',
template: '<a ui-sref="register" tabindex="0" linkdisabled="{{type}}"
class="btn btn-block btn-success ng-class: {disabled: !(type)}" role="button" >next</a>',
link: function (scope, el, attrs){
$(el).popover({
trigger: 'click',
html: true,
toggle:'popover',
title: 'notice !!',
content: attrs.popoverHtml,
placement: 'top'
});
}
};
});

我的 html 是:

<next-level id='pop' popover-html='{{typeMessage}}'></next-level>

typeMessage 应根据用户行为进行更改,但它仅显示初始消息,弹出窗口打开时不会更改内容。

最佳答案

您应该使用“@”绑定(bind)隔离范围以反射(reflect)更改

app.directive('nextLevel', function () {
return {
restrict: 'EA',
scope:{ popoverHtml:'@'}, // Isolated the scope
template: '<a ui-sref="register" tabindex="0" linkdisabled="{{type}}"
class="btn btn-block btn-success ng-class: {disabled: !(type)}" role="button" >next</a>',
link: function (scope, el, attrs){
$(el).popover({
trigger: 'click',
html: true,
toggle:'popover',
title: 'notice !!',
content: scope.popoverHtml, // Access the popoverHtml html
placement: 'top'
});
}
};
});

更新:

Plunker

当您单击单选按钮时,弹出框将消失,弹出框内容将更新。

关于javascript - 如何动态更新弹出内容 AngularJS Bootstrap,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39817316/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com