Question

技术： AngularJs和Bootstrap-ui

环境：我使用了一个可折叠的过滤器部分，它由“FilterCtrl”控制。过滤器中的每个输入元素由嵌套控制器控制，如“TypeaheadCtrl”或“DatepickerCtrl”。每个ng模型都与FilterCtrl中的“$ parent.field”绑定。

问题： Datepicker工作得很好，exept，这就是问题，它没有关闭。根据默认设置（https://angular-ui.github.io/bootstrap/#/datepicker），日期选择器应在选择日期时关闭。它不是。即使我点击按钮栏的“关闭”按钮，它也没有。如果焦点发生变化，它会关闭。

HTML：

<div class="" ng-controller="FilterCtrl">
  <a class="black bold nodecoration" ng-click="isCollapsed = !isCollapsed" role="button">Filter</a>
<!-- Filter -->
  <div class="bckgrnd-lgrey bordered max-width" collapse="isCollapsed" id="findenFilter">
    <div class="nobreak" ng-controller="TypeaheadCtrl">
      <label>Suchbegriff:
        <input ng-model="$parent.searchText" placeholder="z.B. Rock" type="text" typeahead="prediction for prediction in predictions | filter:$viewValue |limitTo:8"></label>
    </div>
    <div class="nobreak" ng-controller="DatepickerCtrl">
      <label>Datum:
        <input class="" close-text="Close" datepicker-popup="{{format}}" is-open="status.opened" ng-click="open()" ng-model="$parent.selectedDate" show-weeks="false" type="text">
    </div>
    <div class="nobreak">
      <label>Land: </label>
    </div>

    <button type="button" name="button" ng-click="printValues()">log values</button>
  </div>

</div>

JS： DatepickerCtrl：

angular.module('tbdApp')
  .controller('DatepickerCtrl', function($scope) {
    this.awesomeThings = [
      'HTML5 Boilerplate',
      'AngularJS',
      'Karma'
    ];
    $scope.today = function() {
      $scope.selectedDate = new Date();
    };
    $scope.clear = function() {
      $scope.selectedDate = null;
    };
    $scope.open = function($event) {
      $scope.status.opened = true;
    };


    $scope.status = {
      opened: false
    };

    $scope.formats = ['dd.MM.yyyy', 'dd-MMMM-yyyy', 'yyyy/MM/dd'];
    $scope.format = $scope.formats[0];
    $scope.today();
  });

FilterCtrl：

angular.module('tbdApp')
  .controller('FilterCtrl', function ($scope) {
    this.awesomeThings = [
      'HTML5 Boilerplate',
      'AngularJS',
      'Karma'
    ];
    $scope.isCollapsed = false;
    $scope.selectedDate = null;
    $scope.searchText = null;
    $scope.printValues = function () {
      console.log("collapsed: " + $scope.isCollapsed);
      console.log("selectedDate: " + $scope.selectedDate);
      console.log("searchText: " + $scope.searchText);
    }
  });

我没有找到任何有类似问题的人。我想这可能是一个范围问题，但我不知道问题究竟是什么。

Answer 1

因此，根据您的plunkr示例，我确定的问题是您输入的事件。而不是

ng-click="open()"

DO

ng-focus="open()"

这是因为在您选择日期之后，angularjs会尝试将click事件移动到输入框中。不知道为什么，但这就是行为。

Answer 2

智能且灵活的解决方案：在open（）方法中检查$ event.target。

HTML：

<div class="my-datepicker" ng-click="datePickers.open(0, $event)">
    <input type="text" ng-model="date_min" uib-datepicker-popup is-open="datePickers.opened[0]"/>
    <span class="glyphicon glyphicon-calendar"></span>
</div>
<div class="my-datepicker" ng-click="datePickers.open(1, $event)">
    <input type="text" ng-model="date_max" uib-datepicker-popup is-open="datePickers.opened[1]"/>
    <span class="glyphicon glyphicon-calendar"></span>
</div>

JS：

$scope.datePickers = {
    opened: [false, false],

    open: function (i, e) {
        if (!$(e.toElement).parent().hasClass('my-datepicker')) return;
        this.opened[i] = true;
    }
};

Bootstrap-ui datepicker close-on-date-selection

2 个答案: