Question

var app = angular.module('brandPortalApp');

app.directive('multiselectDropdown', function () {
    return {
        restrict: 'E',
        scope: {
            model: '=',
            options: '=',
        },
        template:
            "<div class='btn-group' data-ng-class='{open: open}' style='width: 200px;'>" +
            "<button class='btn btn-small' style='width: 160px;' data-ng-click='openDropdown1();'>---Select---</button>" +
            "<button class='btn btn-small dropdown-toggle' data-ng-click='openDropdown1();' style='width: 40px;' ><span class='caret'></span></button>" +
            "<ul class='dropdown-menu' aria-labelledby='dropdownMenu' style='position: relative;'>" +
            "<li style='cursor:pointer;' data-ng-repeat='option in options'><a data-ng-click='toggleSelectItem(option)'><span data-ng-class='getClassName(option)' aria-hidden='true'></span> {{option.barcode}}</a></li>" +
            "</ul>" +
            "</div>",

            link: function (scope) {
                scope.openDropdown1 = function () {
                    scope.open = !scope.open;
                };

                scope.selectAll = function () {
                    scope.model = [];
                    angular.forEach(scope.options, function (item, index) {
                        scope.model.push(item);
                    });
                };

                scope.deselectAll = function () {
                    scope.model = [];
                };

                scope.toggleSelectItem = function (option) {
                    var intIndex = -1;
                    angular.forEach(scope.model, function (item, index) {
                        if (item.id == option.id) {
                            intIndex = index;
                        }
                    });

                    if (intIndex >= 0) {
                        scope.model.splice(intIndex, 1);
                    } else {
                        scope.model.push(option);
                    }
                };

                scope.getClassName = function (option) {
                    var varClassName = 'glyphicon glyphicon-remove-circle';
                    angular.forEach(scope.model, function (item, index) {
                        if (item.id == option.id) {
                            varClassName = 'glyphicon glyphicon-ok-circle';
                        }
                    });
                    return (varClassName);
                };
            }
    }

});

嗨。我是AngularJs.的新手。我使用上面的指令创建了一个multiselectDropdown.Dropdown工作正常。现在点击外面我需要关闭下拉列表。我不知道如何继续。任何人都可以帮忙。

Answer 1

您可以使用clickOutside，如下所示：

return {
  restrict: 'A',
  scope: {
    clickOutside: '&'
  },
  link: function(scope, el, attr) {
    $document.on('click', function(e) {
      if (el !== e.target && !el[0].contains(e.target)) {
        scope.$apply(function() {
          scope.$eval(scope.clickOutside);
        });
      }
    });
  }
}

Answer 2

避免弹出关闭“data-backdrop =”static“data-keyboard =”false“”

尝试相反，你可能会......

Answer 3

scope.settings = {
                        closeOnBlur: true
                };      
if (scope.settings.closeOnBlur) {
                        document.on('click', function (e) {
                            var target = e.target.parentElement;
                            var parentFound = false;
                            while (angular.isDefined(target) && target !== null && !parentFound) {
                                if (_.contains(target.className.split(' '), 'multiselect-parent') && !parentFound) {
                                    if (target === dropdownTrigger) {
                                        parentFound = true;
                                    }
                                }
                                target = target.parentElement;
                            }
                            if (!parentFound) {
                                scope.$apply(function () {
                                    scope.open = false;
                                });
                            }
                        });
                    }

在我的指令中添加此内容使我的下拉菜单关闭。

在AngularJs外面点击关闭

3 个答案: