Javascript 如何使指令启用/禁用？

我已经在Angular中创建了指令。我正在从mybox调用popover指令。我希望仅在单击“启用”按钮后才激活popover指令

我想把ng包括在内，但如果有指示，我该如何使用？ 请建议

小提琴：：

指令代码：：

    var bootstrap = angular.module("bootstrap", []);
bootstrap.directive('myBox', function ($compile) {
       return {
            restrict: "E",
            transclude: true,
            template: "<span>Hello In side Box <a href='#' pop-over items='items' title='Mode of transport'>Show Pop over</a> </span>",
            link: function (scope, element, attrs) {
                var popOverContent;
                if (scope.items) {
                    var html = getTemplate("items");
                    popOverContent = $compile(html)(scope);                    
                }
                var options = {
                    content: popOverContent,
                    placement: "bottom",
                    html: true,
                    title: scope.title
                };
                $(element).popover(options);
            },
            scope: {
                items: '=',
                title: '@'
            }
        };
    });
bootstrap.directive('popOver', function ($compile) {
        var itemsTemplate = "<ul class='unstyled'><li ng-repeat='item in [1,2,3,4,5,6,7,8]'>{{item}}</li></ul>";
        var getTemplate = function (contentType) {
            var template = '';
            switch (contentType) {
                case 'items':
                    template = itemsTemplate;
                    break;
            }
            return template;
        }
        return {
            restrict: "A",
            transclude: true,
            template: "<span ng-transclude></span>",
            link: function (scope, element, attrs) {
                var popOverContent;
                if (scope.items) {
                    var html = getTemplate("items");
                    popOverContent = $compile(html)(scope);                    
                }
                var options = {
                    content: popOverContent,
                    placement: "bottom",
                    html: true,
                    title: scope.title
                };
                $(element).popover(options);
            },
            scope: {
                items: '=',
                title: '@'
            }
        };
    });
bootstrap.directive( 'dismissPopovers', [ '$http', '$templateCache', '$compile', '$parse', function ( $http, $templateCache, $compile, $parse) {
            return {
                restrict: 'A',
                link: function(scope, element, attrs) {
                    element.bind('mouseup', function(e) {
                        var clickedOutside = true;
                        $('.popover-link').each(function() {
                            if ($(this).is(e.target) || $(this).has(e.target).length) {
                                clickedOutside = false;
                                return false;
                            }
                        });
                        if ($('.popover').has(e.target).length) {
                            clickedOutside = false;
                        }
                        if (clickedOutside) {
                            $('.popover').prev().click();
                        }
                    });   
                }
            };
        }]);

var bootstrap=angular.module（“bootstrap”，[]）；
指令（'myBox'，函数（$compile）{
返回{
限制：“E”，
是的，
模板：“侧框中的您好”，
链接：函数（范围、元素、属性）{
var含量过高；
if（范围项目）{
var html=getTemplate（“项目”）；
popOverContent=$compile（html）（范围）；
}
变量选项={
内容：popOverContent，
位置：“底部”，
是的，
标题：scope.title
};
$（元素）.popover（选项）；
},
范围：{
项目：“=”，
标题：“@”
}
};
});
指令（'popOver'，函数（$compile）{
var itemsTemplate=“

您可以覆盖bootstrap指令，以向其传递一个参数，无论它是否应显示popver。首先将变量添加到指令属性：

控制器：

$scope.popOverShouldOpen = whatYouWantThere;

模板：

<div pop-over pop-over-should-open="popOverShouldOpen"></div>

然后将“if”语句放入link函数中：

link: function (scope, element, attrs) {
            if( scope.popOverShouldOpen === true ){
             var popOverContent;
             if (scope.items) {
                 var html = getTemplate("items");
                 popOverContent = $compile(html)(scope);                    
             }
             var options = {
                 content: popOverContent,
                 placement: "bottom",
                 html: true,
                 title: scope.title
             };
             $(element).popover(options);
            }
        },

或者，您可以根据您的上下文简单地执行此操作：

<div pop-over ng-show="popOverShouldOpen"> Hello there ! </div>
<div ng-hide="popOverShouldOpen"> Hello there ! </div>

你好！
你好！

---

当然，这最后一个是一个快速黑客。对于大量使用，请选择第一个

我想为所有指令创建一个公共按钮，不知何故，我将此PopOvershouldPen值带到了popover指令中。控制器-->mybox-->popover，但当单击按钮时，我更改控制器变量，它不会反映出来。只需添加一个按钮来更改$scope的值。PopOvershouldPen：设置为true时，使用这样定义的指令，将显示任何弹出窗口。当错误发生时，他们不会！是的，我加的那个按钮。它也改变了价值。我终于被卡住了。控制器-->mybox-->popover在我传递变量的这个链中，这个值内的{{togg}}被完美地打印出来，但在链接attrs.togg内显示了写在控制器中的变量名。我用=来赋值。我想知道在这个模板{{}中，它打印的是真/假，但在指令链接中，它显示的是错误的。在您的指令范围定义和模板中添加了popOverShouldOpen:“=”之后，您不想使用attrs.togg，而是scope.togg！实际上，正如我在box指令中所说的，我在attr中使用它，因为我已经在我的box中编写了弹出窗口。我不认为控制器变量可以直接传递到popover中，因为它在mybox中。controllerr-->mybox-->popover

<div pop-over ng-show="popOverShouldOpen"> Hello there ! </div>
<div ng-hide="popOverShouldOpen"> Hello there ! </div>