javascript - (Angular + Bootstrap)如何阻止两个日期选择器被同一按钮打开

Question

我有一个网页需要两个日期选择器，开始日期和结束日期。问题是，每当我单击字形打开日期选择器时，两个日期选择器都会同时打开。

这是我的模板、指令、 Controller 及其使用方式。任何帮助将不胜感激。

模板:

<div class="input-group">
    <input type="text" class="form-control" uib-datepicker-popup="dd/MM/yyyy" ng-model="start_date" is-open="popup.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" />
    <span class="input-group-btn">
        <button type="button" class="btn btn-default" ng-click="open()">
            <i class="glyphicon glyphicon-calendar"></i>
        </button>
    </span>
</div>

指令:

'use strict';
/*global angular*/

angular.module("myApp")
.directive("datepicker", function(){
    return{
        templateUrl: 'templates/datePicker.html',
        controller: 'newDateCtrl',
        replace: true
    };
});

Controller

/*global angular*/
angular.module("myApp").controller("newDateCtrl", function($scope) {

    $scope.popup = {
        opened: false
    };

    $scope.open = function() {
        $scope.popup.opened = true;
    };

    $scope.dateOptions = {
        formatYear: 'yy',
        maxDate: new Date(2020, 5, 22),
        minDate: new Date(),
        startingDay: 1
    };

})

index.html，作为这样的表单的一部分:

....
<div class="form-group">
    <label class="control-label col-sm-2">
        Start Date
    </label>
    <div class="col-sm-10">
        <datepicker></datepicker>
    </div>
</div>
<div class="form-group">
    <label class="control-label col-sm-2">
        End Date
    </label>
    <div class="col-sm-10">
        <datepicker></datepicker>
    </div>
</div>
....

Answer 1

有两件事: - 声明指令时，使用隔离范围。

即

.directive('...', function() {
  return {
   .... // your existing stuff
   scope: {} // this gives each directive instance isolated scope
  }
});

• 我认为“datepicker”已经是 Bootstrap 指令的名称，因此如果您要包装它，则应该考虑给它一个不同的名称。