javascriptangularjsangularjs-directiveng-switchangularjs-ng-switch

Angular JS - adding a custom directive to an element with ng-switch-when directive


Using AngularJS 1.5, I've built a custom attribute directive, that adds a date-range-picker directive, and it's options, to the element :

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);
                }
            };
        }
    };
});

When I'm adding this directive to a simple input like this:

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

I'll get the required result in the 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="">

And the date-range-picker is active and doing it's work. However, If I'm adding a conditional directive to my element, In my case ng-switch-when:

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

This element will not be rendered at all, even though, the directive function is being executed. How can I add my directive to an element with a conditional directive on it and have it rendered?

A working solution (Edited) By adding a priority value higher than the ng-switch (which is 1200 apparently), The customed directive is now being executed before the ng-switch-then directive, and the datepicker is being rendered.


Solution

  • EDIT: misunderstood the question

    It looks like the ng-switch-when is also being applied to the attribute directive, but it either thinks it's not within an ng-switch or it does not have access to the outer scope, so the ng-switch-when resolves to false.

    There are a couple of solutions:

    1) Wrap the input in a span and put the ng-switch-when on that instead of the input

    2) Remove the ng-switch-when attribute in the directive element.removeAttr("ng-switch-when");

    Both seem to work (when experimenting in a Plunker). Personally, I prefer the first as it's all within the template.


    Original answer:

    ng-switch affects the element it is on, not the attributes within it. There are a few ways of conditionally showing the custom attribute:

    If you wanted to use ng-switch, you could have two inputs:

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

    Alternatively, you could add an extra attribute on your directive and do the check in the directive, e.g.

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

    You may also be able to use this to conditionally apply the attribute (see this question). I haven't tried this myself.