Question

我在Angular中创建了指令。我正在从mybox调用popover指令。我希望只有在单击“启用”按钮后才能使popover指令处于活动状态。

我想到ng-include但是指令如何使用？请建议......

指令代码::

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

Answer 1

你可以覆盖bootstrap指令，为它传递一个参数，它应该显示popver与否。首先将一个变量添加到指令属性：

控制器：

$scope.popOverShouldOpen = whatYouWantThere;

模板：

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

然后将其添加到指令范围：

 scope: {
            items: '=',
            title: '@',
            popOverShouldOpen: "="
        }

然后把＆＃34;如果＆＃34;链接函数内的语句：

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>

当然最后一个是快速入侵。对于大量使用更喜欢第一个！

如何使指令启用/禁用？

1 个答案: