how can i prevent to show bootstrap popover sometime in angularJs

Question

I use bootstrap popover in custom angularJs directive . i will show error message when $scope.buytypeButton= {type:false} button should disabled and show error message in popover . but i want when $scope.buytypeButton= {type:true} button should active and not showing popover .

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

Answer

I use this code and it's work fine .

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

inside my directive .

Answer 1

Answer :

I use this code and it's work fine .

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

inside my directive .

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

Answer 2

Haven't used bootstrap popover. I guess you can watch buytypeButton and show/hide popover when it's changed.

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

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