自举的UI日期选择器近距离上的最新选择

Question

技术： AngularJs和Bootstrap-UI

环境： 我使用由 “FilterCtrl” 控制的collabsable滤波器部。过滤器中的每个输入元素都由嵌套控制器（如“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()" 

做

ng-focus="open()" 

这种情况由于您选择的日期之后，angularjs尝试单击事件移动到输入框。不知道为什么，但这是行为。

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; 
    } 
};