conditional custom attribut directive in AngularJS

Question

I have two custom directives (restrict : 'A') which are working well (custom1 and custom2)

In my html page I would like to use either custom1 attribut or custom2 attribut on a div depending on a condition. For example I would like to write something like this :

<div condition?custom1:custom2 />

I don't want to use ng-if like in the following code:

<div id='main-div' ng-if="map.2d==true" custom1 />
<div id='main-div' ng-if="map.2d==false" custom2 />

Is there a way to write such a condition for attribut custom directives?

Sebastian · Accepted Answer · 2014-05-07 15:54:58Z

1

Update

You could build a separate directive which dynamically compiles the required directive:

app.directive('dynamicDirective', function($compile) {
  return {
    restrict: 'A',
    replace: true,
    scope: {
      dynamicDirective: '='
    },
    link: function(scope, elem, attrs) {
      var e = $compile("<div " + scope.dynamicDirective + "></div>")(scope);
      elem.append(e);
    }
  };
});

It can be used as follows (in this sample someDirective is defined on the scope and has the name of the required directive):

<div dynamic-directive="someDirective"></div>

Here is a sample

edited May 7, 2014 at 15:54

answered May 7, 2014 at 7:49

Sebastian

17.5k5 gold badges51 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

clement Over a year ago

Are you sure about the syntax ? It seems that it's not working. But anyway I would like to use a 'A' directive since it's not a css style that I want to 'inject' but a real behaviour on my html element.

Sebastian Over a year ago

@clement you are right it doesn't work as the interpolation runs after the directive compilation. I will update my answer.

Collectives™ on Stack Overflow

conditional custom attribut directive in AngularJS

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related