Question

我在自定义angularJs指令中使用bootstrap popover。我将在禁用$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');
                   }
                });

在我的指令中。

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

Answer 2

没有使用过bootstrap popover。我猜你可以看buytypeButton并在改变时显示/隐藏弹出窗口。

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

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

我如何防止在angularJs中显示bootstrap popover

2 个答案: