Question

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

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

模板：

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

控制器

/*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指令的名称，所以如果你要包装它，你应该考虑给它一个不同的名字。

（Angular + Bootstrap）如何阻止两个日期选择器被同一个按钮打开

1 个答案: