如何动态更新弹出窗口内容

How to dynamically update popover content AngularJS Bootstrap

本文关键字：窗口 更新 何动态 动态      更新时间：2023-09-26

我使用自定义AngularJs指令来创建引导弹出窗口，但是当创建弹出窗口时，弹出窗口的内容不能改变，它被修复了。

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

my HTML is:

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

typeMessage应该根据用户行为进行更改，但它只显示初始消息，而不是在弹出窗口打开时更改内容。

你应该用'@'绑定来隔离作用域，以反映变化

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'
                });
            }
        };
    });
更新:

砰砰作响

当你点击单选按钮，弹出将消失，弹出的内容将更新。

相关文章：