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

【问题标题】：how can i prevent to show bootstrap popover sometime in angularJs我如何防止在 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 会很棒！

标签： javascript jquery angularjs twitter-bootstrap angular-ui-router

【解决方案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