我如何防止在 angularJs 中显示引导弹出窗口

Posted 2023-05-09

【中文标题】我如何防止在 angularJs 中显示引导弹出窗口

【英文标题】：how can i prevent to show bootstrap popover sometime in angularJs

【发布时间】：2017-02-20 05:58:58

【问题描述】：

我在自定义 angularJs 指令中使用引导弹出框。当$scope.buytypeButton= type:false 按钮应禁用并在弹出窗口中显示错误消息时，我将显示错误消息。 但我希望$scope.buytypeButton= type:true 按钮应该处于活动状态并且不显示弹出窗口。

html：

 <my-next-level id='pop' buytype-button='buytypeButton' 
popover-html='message' click-next='clickNext()'></my-next-level>

angularJs：

app.controller('MainCtrl', function($scope,$http) 
                $scope.message='error';
                $scope.buytypeButton= type:false;
;



 app.directive('myNextLevel', function () 
        return 
            restrict: 'EA',
            scope: buytypeButton:'=', popoverHtml:'@', clickNext:'&',
            template: '<a href="" tabindex="0" class="btn btn-block btn-success 
ng-class: disabled: !buytypeButton.type " role="button" data-ng-click="clickNext()" 
>next</a>',
                link: function (scope, el, attrs)
                    $(el).popover(
                        trigger: 'click',
                        html: true,
                        toggle:'popover',
                        title: 'notice!!',
                        content: scope.popoverHtml,
                        placement: 'top'
                    );
                    attrs.$observe('popoverHtml', function(val)
                        $(el).popover('hide');
                        var popover = $(el).data('bs.popover');
                        popover.options.content = val;
                    );
                
            ;
        );

回答

我使用此代码，它工作正常。

$(el).click(function() 
                   if(scope.buytypeButton.type == true)
                       $(el).popover('hide');
                   
                );

在我的指令中。

【问题讨论】：

plunker 会很棒！

【参考方案1】：

答案：

我使用此代码，它工作正常。

$(el).click(function() 
                   if(scope.buytypeButton.type == true)
                       $(el).popover('hide');
                   
                );

在我的指令中。

app.directive('myNextLevel', function () 
            return 
                restrict: 'EA',
                scope: buytypeButton:'=', popoverHtml:'@', clickNext:'&',
                template: '<a href="" tabindex="0" class="btn btn-block btn-success 
    ng-class: disabled: !buytypeButton.type " role="button" data-ng-click="clickNext()" 
    >next</a>',
                    link: function (scope, el, attrs)
                        $(el).popover(
                            trigger: 'click',
                            html: true,
                            toggle:'popover',
                            title: 'notice!!',
                            content: scope.popoverHtml,
                            placement: 'top'
                        );
    $(el).click(function() 
                   if(scope.buytypeButton.type == true)
                       $(el).popover('hide');
                   
                );
        attrs.$observe('popoverHtml', function(val)
                            $(el).popover('hide');
                            var popover = $(el).data('bs.popover');
                            popover.options.content = val;
                        );
                    
                ;
            );

【参考方案2】：

没有使用引导弹出框。我想您可以观看 buytypeButton 并在弹出窗口更改时显示/隐藏。

link: function (scope, el, attrs)
    // ...  your code

    scope.$watch('buytypeButton', newVal => 
        if (newVal) 
            $(el).popover('hide');
         else 
            $(el).popover(
                // ...
            )
        
    )

【讨论】：

当我使用此代码时，它设置错误 TypeError: Cannot read property 'options' of undefined