Question

我对angular很新，我尝试在我的项目中使用angular-bootstrap-datetimepicker。我的HTML代码是：

<span class="input-group-btn" ng-class="{open: openedDP}">
      <button type="button" class="btn btn-default btn-sm" ng-click="open()">
          <i class="glyphicon glyphicon-calendar"></i>
      </button>
      <ul class="dropdown-menu" role="menu">
          <datetimepicker ng-model="abc"
                          on-set-time="close(new, old)">
          </datetimepicker>
      </ul>
</span>
<input id="abc" ng-model="abc" class="form-control" date-time-input="DD-MM-YYYY HH:mm:SS" />

我希望在用户点击其外的任何位置时关闭日历。我几乎从ui.bootstrap复制粘贴代码。原始的是内部指令，看起来像这样：

var documentClickBind = function(event) {
        if (scope.isOpen && event.target !== element[0]) {
          scope.$apply(function() {
            scope.isOpen = false;
          });
        }
      };

scope.$watch('isOpen', function(value) {
        if (value) {
          scope.$broadcast('datepicker.focus');
          scope.position = appendToBody ? $position.offset(element) : $position.position(element);
          scope.position.top = scope.position.top + element.prop('offsetHeight');

          $document.bind('click', documentClickBind);
        } else {
          $document.unbind('click', documentClickBind);
        }
      });

我的版本（控制器内部）：

var documentClickBind = function (event) {
     if ($scope.openedDP) {
         $scope.$apply(function () {
             $scope.openedDP = false;
         });
      }
 };

  $scope.$watch('openedDP', function (value) {
            if (value) {
                $timeout(function() {
                    $document.bind('click', documentClickBind);
                }, 0, false);
            } else {
                $document.unbind('click', documentClickBind);
            }
        });

我删除了“元素”变量，因为我在控制器中没有它，它似乎有用，但我不知道为什么。也许它只是偶然的？为什么点击日历内部与点击其他地方不同？另外，当我在页面上有多个日期选择器时，我想避免创建这样的多个函数。

Answer 1

您想要的行为内置于引导程序dropdown，如果您的项目中已有引导程序，则可以考虑使用其dropdown。

如果没有，您可以在页面上创建一个自定义指令，当用户点击页面的另一部分时，该指令会广播'page-clicked'事件，然后每个控制器都可以在其范围内侦听该事件并做出相应的反应。

在

1 个答案: