Угловой загрузчик datepicker не загружается в отдельный экран - PullRequest
Новая
       11

Угловой загрузчик datepicker не загружается в отдельный экран

0 голосов
/ 22 октября 2018

У меня есть средство выбора даты на одном экране / URL-адресе (в том же приложении), где шаблон работает и загружается правильно, но теперь на другом экране / URL-адресе (в том же приложении) средство выбора даты не отображается должным образом.Это выглядит так:

enter image description here

Я сравнил оба кода с обоих экранов, и он не работает .. 

function dateFilter() {
        var directive = {
            controller: dateFilterController,
            controllerAs: 'vm',
            bindToController: true,
            restrict: 'E',
            templateUrl: 'app/utils/directives/date-filter/date.filter.tpl.html',
            scope: {
                'popup': '=',//date format
                'options': '=',//uib-datepicker options
                'ngModel': '=',//selected date
                'ngChange': '=',//filter function
                'myId': '=',//id and name of uib-datepicker
                'label': '=',//label that preceeds datepicker
                'name': '=',//name of the property being filtered
                'minDate': '=',//the minumum acceptable date
                'maxDate': '=',//the maximum acceptable date,
                'updateQuery': '=',
                'query': '=',
                'popupUrl': '='
            }
        };
        return directive;

    }

 function dateFilterController() {
        var vm = this;

        vm.dateChanged = function (date) {
            var newFilterValue = {
                query: vm.query,
                value: date
            };
            vm.updateQuery(newFilterValue);
        };

        vm.applyDateFilter = function (x) {
            vm.dateChanged(x);
            var from = true;
            //If the label ends in to, that means we are filtering on the to date.
            if (vm.label.substring(vm.label.length - 2, vm.label.length) === 'to') {
                from = false;
            }
            //format the filter data in a way so it can be interpretted by ngChange
            var temp = {
                key: vm.name,//The name of the property being filtered
                value: x,//The value from the filter
                from: from//Boolean indicating if it is the to(false) or from(true) date.
            };
            vm.ngChange(temp);
        };

        vm.isOpen = false;

        vm.ngClick = function () {

            vm.isOpen = true;
        };
    }

Этофильтр даты tpl 

<div class="date_input">
        <label for="{{vm.myId}}">{{ vm.label | translate}}</label>
    <input tabindex="0"
        role="button"
        aria-labelledby="fromToDescription"
        id="{{vm.myId}}"
        name="{{vm.myId}}"
        type="text"
        class="form-control"
        uib-datepicker-popup="{{vm.popup}}"
        datepicker-options="vm.options"
           datepicker-popup-template-url="{{vm.popupUrl}}"


        placeholder="mm/dd/yyyy" ng-pattern="/^(0[1-9]|1[0-2])\/(0[1-9]|1\d|2\d|3[01])\/(20)\d{2}$/"
        autocomplete="off"

        ng-model="vm.ngModel"
        is-open="vm.isOpen"
        show-button-bar="false"
        ng-change="vm.applyDateFilter(vm.ngModel)"
        ng-click="vm.ngClick($event)"
        minDate="vm.minDate"
        maxDate="vm.maxDate"
    />
</div>

html, где я использовал директиву. 

<!-- FROM DATE -->
            <date-filter
                    popup="$ctrl.formats"
                    options="$ctrl.dateOptions"
                    ng-model="$ctrl.fromDate"
                        ng-change="$ctrl.filterFunction"
                    name="customFromDate"
                    label="$ctrl.fromVerbiage"
                    min-date="$ctrl.dateOptions.minDate"
                    max-date="$ctrl.dateOptions.maxDate"
                    my-id="customFromDate"
                    update-query="$ctrl.updateQuery"
                    query="customFromDate"
                    popup-url="$ctrl.popupTpl"
            ></date-filter>
                <div> <!-- TO DATE -->
                    <date-filter
                            popup="$ctrl.formats"
                            options="$ctrl.dateOptions"
                            ng-model="$ctrl.toDate"
                            ng-change="$ctrl.filterFunction"
                            name="customToDate"
                            label="$ctrl.toVerbiage"
                            min-date="$ctrl.dateOptions.minDate"
                            max-date="$ctrl.dateOptions.maxDate"
                            my-id="customToDate"
                            update-query="$ctrl.updateQuery"
                            query="customToDate"
                            popup-url="$ctrl.popupTpl"
                    ></date-filter>
                </div>
...