如何动态更新Popular内容AngularJS Bootstrap [英] How to dynamically update popover content AngularJS Bootstrap

问题描述

我使用自定义AngularJs指令来创建bootstrap popover但是当make popover popover内容无法更改并且它已修复时。

I use custom AngularJs directive for create bootstrap popover but when make popover popover content can't change and it's fix .

 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 应根据用户进行更改行为但它只显示初始消息，而不是在弹出窗口打开时更改内容。

typeMessage should be change depending on user behavior but it's only show initial message and not change content when popover open .

推荐答案

您应该使用'@'绑定来隔离范围为了反映变化

You should isolate the scope with '@' binding inorder to reflect the change

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

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

When you click on radio button, pop over will disappear and pop over content will be updated.

这篇关于如何动态更新Popular内容AngularJS Bootstrap的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！