提取冗长的类似View组件到指令

Question

我知道指令可以生成HTML DOM

是否可以为每个指令设置不同的控制器？

例如，我有两个类似的日期选择器，每个都有不同的控制器

我想知道如何使用directive来简化我的代码

两个相似组件之间的差异为ng-model和ng-controller

VIEW

<div class="form-group" ng-controller="FlightSkuStartDatepickerCtrl">
    <label class="col-sm-2 control-label"> {{ I18n.t("choose_start_date") }} </label>
    <div class="col-sm-10" ng-click="open($event)">
        <input type="text" class="form-control ng-pristine ng-untouched ng-valid ng-isolate-scope ng-valid-date ng-valid-required" datepicker-popup="yyyy/MM/dd" is-open="opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" required="required" aria-required="false" aria-invalid="false" ng-model="form.start_date"></input>
    </div>
</div>

<div class="form-group" ng-controller="FlightSkuEndDatepickerCtrl">
    <label class="col-sm-2 control-label"> {{ I18n.t("choose_end_date") }} </label>
    <div class="col-sm-10" ng-click="open($event)">
        <input type="text" class="form-control ng-pristine ng-untouched ng-valid ng-isolate-scope ng-valid-date ng-valid-required" datepicker-popup="yyyy/MM/dd" is-open="opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" required="required" aria-required="false" aria-invalid="false" ng-model="form.end_date"></input>
    </div>
</div>

控制器

    app.controller('FlightSkuStartDatepickerCtrl', ['$scope',
        function($scope) {
            // Disable weekend selection
            $scope.disabled = function(date, mode) {
                return (mode === 'day' && (date.getDay() === 0 || date.getDay() === 6));
            };

            $scope.toggleMin = function() {
                $scope.minDate = $scope.minDate ? null : new Date();
            };
            $scope.toggleMin();

            $scope.open = function($event) {
                $event.preventDefault();
                $event.stopPropagation();

                $scope.opened = true;
            };

            $scope.dateOptions = {
                formatYear: 'yy',
                startingDay: 1,
                class: 'datepicker'
            };
            $scope.formats = ['YYYY/MM/DD'];
            $scope.format = $scope.formats[0];
        }
    ]);
    app.controller('FlightSkuEndDatepickerCtrl', ['$scope',
        function($scope) {
            // Disable weekend selection
            $scope.disabled = function(date, mode) {
                return (mode === 'day' && (date.getDay() === 0 || date.getDay() === 6));
            };

            $scope.toggleMin = function() {
                $scope.minDate = $scope.minDate ? null : new Date();
            };
            $scope.toggleMin();

            $scope.open = function($event) {
                $event.preventDefault();
                $event.stopPropagation();

                $scope.opened = true;
            };

            $scope.dateOptions = {
                formatYear: 'yy',
                startingDay: 1,
                class: 'datepicker'
            };
            $scope.formats = ['YYYY/MM/DD'];
            $scope.format = $scope.formats[0];
        }
    ]);