angularjs - Angular-UI Datepicker ディレクティブを拡張する

Question

私は Angular-ui-bootstrap の ui-datepicker をよく使用していますが、使用するたびに、毎回同じようにセットアップする必要があります。だから、次のように使用できる custom-datepicker というディレクティブを作成できるかどうか疑問に思っていました

<custom-datapicker>

ディレクティブで設定を一度設定すると、サイトのどこでも再利用できるようになります。

以下のようなディレクティブを作成しようとしました

app.directive('customDatapicker', function () {
    return {
        restrict: 'E',
        require: 'ngModel',
        templateUrl: function (elem, attrs) {
            return '/AngularJS/Directives/customDatapicker.html'
        },
        link: function (scope, element, attrs, ngModel) {
        $scope.inlineOptions = {
            showWeeks: true
        };

        $scope.dateOptions = {
            formatYear: 'yy',
            startingDay: 1
        };


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

        $scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
        $scope.format = $scope.formats[0];

        $scope.selected = {
            opened: false
        };

        },
});

また、テンプレートを使用して、カスタム HTML ラッパーを作成できるようにしています。これまでのところ、サンプルのhtml以外には何もありません

テンプレートHTML

<p class="input-group">
        <input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="ngModel" is-open="selected.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" />
        <span class="input-group-btn">
            <button type="button" class="btn btn-default" ng-click="open()"><i class="glyphicon glyphicon-calendar"></i></button>
        </span>
    </p>

テンプレート html では、ng-mode='ngModel' を実行して、datepicker の ng-model でディレクティブの入力モデルをバインドしようとしていますが、これは正しい方法ではないと思います。

データがJS DateオブジェクトであるこのようなHTMLページでディレクティブを使用します

<custom-datapicker ng-model='data'>

これはできますか？