Angular JS - добавление пользовательской директивы к элементу с помощью директивы ng-switch-when - PullRequest
Новая
       24

Angular JS - добавление пользовательской директивы к элементу с помощью директивы ng-switch-when

0 голосов
/ 07 ноября 2018

Используя AngularJS 1.5, я создал собственную директиву атрибута, которая добавляет к элементу директиву выбора диапазона дат и ее параметры: 

app.directive('clSingleDatePicker', function($compile) {
    var opts_single_date = {
        singleDatePicker: true
    };
    return {
        restrict: 'A',
        compile: function compile(element, attrs) {
            element.attr('date-range-picker', '');
            element.attr('options', 'opts');
            element.removeAttr("cl-single-date-picker"); //remove the attribute to avoid indefinite loop
            return {
                pre: function preLink(scope, iElement, iAttrs, controller) {
                },
                post: function postLink(scope, iElement, iAttrs, controller) {
                    scope.opts = opts_single_date;
                    $compile(iElement)(scope);
                }
            };
        }
    };
});

Когда я добавляю эту директиву к простому вводу, подобному этому: 

<input cl-single-date-picker type="text" ng-model="someModel"/>

Я получу требуемый результат в DOM: 

<input type="text" ng-model="someModel" class="ng-pristine ng-valid ng-scope ng-isolate-scope ng-empty ng-touched" date-range-picker="" options="opts" style="">

И выбор диапазона дат активен и выполняет свою работу. Однако, если я добавляю условную директиву к своему элементу, в моем случае ng-switch-when: 

<input  ng-switch-when="1" cl-single-date-picker type="text" ng-model="someModel"/>

Этот элемент не будет отображаться вообще, хотя функция директивы выполняется. Как я могу добавить свою директиву к элементу с условной директивой на нем и сделать это?

Рабочий раствор (отредактированный) Добавляя значение приоритета выше, чем ng-switch (который составляет 1200 , по-видимому, ), теперь выполняемая директива выполняется перед директивой ng-switch-then, и формируется средство выбора даты.

1 Ответ

0 голосов
/ 07 ноября 2018

РЕДАКТИРОВАТЬ: неправильно понял вопрос

Похоже, ng-switch-when также применяется к директиве атрибута, но он либо думает, что находится вне ng-switch, либо не имеет доступа к внешней области видимости, поэтому ng-switch-when разрешается в false.

Есть несколько решений:

1) Оберните input в span и поместите ng-switch-when вместо него input

2) Удалите атрибут ng-switch-when в директиве element.removeAttr("ng-switch-when");

Кажется, что оба работают (при экспериментировании в Plunker). Лично я предпочитаю первое, так как все в шаблоне.

Оригинальный ответ:

ng-switch влияет на элемент, на котором он находится, а не на атрибуты внутри него. Существует несколько способов условного отображения пользовательского атрибута:

Если вы хотите использовать ng-switch, у вас может быть два входа: 

<input ng-switch-when="1" cl-single-date-picker type="text" ng-model="someModel"/>
<input ng-switch-when="2" type="text" ng-model="someModel"/>

В качестве альтернативы, вы можете добавить дополнительный атрибут в вашу директиву и выполнить проверку в директиве, например, 

<input cl-single-date-picker show-picker="{{showPicker}}" type="text" ng-model="someModel"/>

Вы также можете использовать this для условного применения атрибута (см. this question ). Я не пробовал это сам.

...