Question

我使用angular-ui-datepicker来渲染datepicker，我正在尝试通过js自定义选项......

指令如下所示

csapp.directive("csDateField", function () {

    //options: minViewMode, daysOfWeekDisabled, startDate, endDate
    var templateHtml = function () {
        return '<div ng-form="myform">' +
                '<div class="control-group" class="{{options.class}}">' +
                    '<div class="control-label">{{options.label}} {{ options.required ? "*" : ""}} {{options.minViewMode}} </div>' +
                    '<div class="controls">' +
                        '<div class="input-append">' +
                            '<input type="text" name="myfield" class="input-medium"  data-ng-model="ngModel" ' +
                                ' data-ng-required="options.required" data-date-min-view-mode="{{options.minViewMode}}" ' +
                                ' data-date-days-of-week-disabled="{{options.daysOfWeekDisabled}}" data-date-format="{{options.format}}" ' +
                                ' placeholder="{{options.placeholder}}" bs-datepicker >' +
                            '<button type="button" class="btn" data-toggle="datepicker"><i class="icon-calendar"></i></button> ' +
                        '</div>' +
                        '<div class="field-validation-error" data-ng-show="myform.myfield.$invalid && myform.myfield.$dirty"> ' +
                            '<div data-ng-show="myform.myfield.$error.required">{{options.label}} is required!!!</div>' +
                        '</div>' +
                    '</div>' +
                '</div>' +
            '</div>';
    };

    return {
        scope: { options: '=', ngModel: '=' },
        required: ['ngModel', '^form'],
        restrict: 'E',
        template: templateHtml,
    };
});

所以我想要实现的是渲染datepicker，如：

<cs-date-field options="birthdate" ng-model="date2"></cs-date-field>

并从js传递参数：

$scope.birthdate = { label: "BirthDate", required: true, minViewMode: "months" };

虽然必需属性正常工作，但minViewMode无效... 传递给minViewMode参数的值是：{{options.minViewMode}}而不是它的实际值......

角度版本是1.0.7。我尝试在链接函数

中使用$ compile如下所示

element.html(templateHtml());
$compile(element.contents())(scope);

但这也行不通......

Answer 1

使用编译函数而不是链接函数以下示例，您可以使用fieldHtml函数来生成html

var compileFunction = function (element) {
        return function (scope) {
            var template = fieldHtml(scope.options);
            element.html(template);
            $compile(element.contents())(scope);
        };
    };

带参数的angular-ui datepicker自定义指令

1 个答案: