1

我一直在使用 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 中绑定我的指令的输入模型，我认为这不是正确的方法。

我像这样在我的 html 页面中使用我的指令，其中数据是 JS 日期对象

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

这可以做到吗？

4

2 回答 2

0

不要在自定义指令上使用 ng-model，而是定义一个自定义属性，然后将该值传递给 datepicker 的 ng-model 属性。

<custom-datepicker customAttrib="val" ...

然后在模板中：

<input ng-model="{{customAttrib}}" ...
于 2016-03-09T17:42:56.310 回答
0

有趣的是，我今天一直在看一些非常相似的东西。您可以使用两种方式绑定来传递您的模型，并且它主要工作。

<my-datepicker ng-model="myDateModel"></my-datepicker>

指示：

scope: {
    ngModel: '='
}

模板：

<input type="text" ng-model="ngModel" />

问题是，如果您在使用 datepicker 之外操作模型，则指令上的模型类（ng-valid、ng-touched 等）不会更新。输入和表单上的类...

于 2016-03-09T20:08:16.700 回答