Angular: adding conditional attributes to HTML

Question

I am using Angular 1.5 and I have a use case where I want to add directive attributes to HTML conditionally.

To illustrate: if condition is true, want the directive1 and directive2 to be added as an attribute.

<ng-form class="myForm" directive1 directive2>

and when condition is false, I want the directive3 and directive4 to be added as an attribute

<ng-form class="myForm" directive3 directive4>

I have tried doing conditional logic directly but this did not work:

<ng-form class="myForm" {{ condition ? directive1 directive2 :directive3 directive4 }}>

Does anyone has a suggestion to achieve this easily?

Is the use case specifically for directive1, directive2, directive3 and directive4? Or just in general? — gaheinrichs
– gaheinrichs, Commented Jul 1, 2016 at 4:25
@gaheinrichs I definitely want to add atleast two directive based on a condition. These directives are basically to add validations on the form — akhouri
– akhouri, Commented Jul 1, 2016 at 4:34

Community · Accepted Answer · 2017-05-23 12:32:59Z

1

You can try wrapping those directives into another directive. There is answer for that already:

Add directives from directive in AngularJS

I am adding this code from the other answer:

angular.module('app')
  .directive('commonThings', function ($compile) {
    return {
      restrict: 'A',
      replace: false,
      terminal: true,
      scope: {
        condition: '='
      },
      priority: 1000,
      link: function link(scope,element, attrs) {
        if(!scope.condition){
             element.attr('directive1', '');
             element.attr('directive2', '');
        }else{
             element.attr('directive3', '');
             element.attr('directive4', '');
        }

        element.removeAttr("common-things"); //remove the attribute to avoid indefinite loop
        element.removeAttr("data-common-things"); //also remove the same attribute with data- prefix in case users specify data-common-things in the html

        $compile(element)(scope);
      }
    };
  });

edited May 23, 2017 at 12:32

CommunityBot

11 silver badge

answered Jul 1, 2016 at 4:35

gaheinrichs

6101 gold badge6 silver badges13 bronze badges

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

1 Comment

akhouri Over a year ago

This seems to be a good suggestion! I will probabbly wait if anyone has any more brighter ideas.

Stark Buttowski · Accepted Answer · 2016-07-01 06:55:25Z

1

New answer

<ng-form class="myForm" ng-attr-directive1="{{condition}}" ng-attr-directive3="{{!condition }}">

ng-attr will solve you case. It checks the condition and adds the attr to the HTML element.

OLD ONE

why can't you use a ng-show in the directive itself. It will check the condition and appear only if it is true.

edited Jul 1, 2016 at 6:55

answered Jul 1, 2016 at 4:34

Stark Buttowski

1,8492 gold badges11 silver badges21 bronze badges

1 Comment

akhouri Over a year ago

appraently these are reusable directives created for form validations, so a change to all these directives wouldn't be a good idea to encoporate this new condition. i just need a way to be able to inject these to the form based on a condition.

derp · Accepted Answer · 2016-07-01 04:22:37Z

0

Why not use ng-if?

<ng-form ng-if="condition" class="myForm" directive1 directive2>
<ng-form ng-if="!condition" class="myForm" directive3 directive4>

answered Jul 1, 2016 at 4:22

derp

2,30815 silver badges20 bronze badges

3 Comments

akhouri Over a year ago

ya I thought of doing that, but the problem is that since ng-if is on the ng-form it will hide entire form. Work around for this is probably to duplicate the ng-form content twice which I want to avoid.

derp Over a year ago

hmm, why not create a new directive to contain the logic for ng-form? That way it'll only be two lines

akhouri Over a year ago

agree! that would be a good idea for refactoring code, but at this point I am looking for solution for my problem on being able to inject different directives for validation of the form based on a condition

Collectives™ on Stack Overflow

Angular: adding conditional attributes to HTML

3 Answers 3

1 Comment

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related