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

Question

Используя 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, и формируется средство выбора даты.

Answer 1

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

Похоже, 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"/>

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