0

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?

akhouri
  • 3,065
  • 3
  • 25
  • 29
  • Is the use case specifically for directive1, directive2, directive3 and directive4? Or just in general? – gaheinrichs Jul 01 '16 at 04: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 Jul 01 '16 at 04:34

3 Answers3

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.

Stark Buttowski
  • 1,799
  • 2
  • 10
  • 21
  • 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. – akhouri Jul 01 '16 at 06:30
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);
      }
    };
  });
Community
  • 1
  • 1
gaheinrichs
  • 565
  • 5
  • 13
  • This seems to be a good suggestion! I will probabbly wait if anyone has any more brighter ideas. – akhouri Jul 01 '16 at 06:35
0

Why not use ng-if?

<ng-form ng-if="condition" class="myForm" directive1 directive2>
<ng-form ng-if="!condition" class="myForm" directive3 directive4>
derp
  • 2,300
  • 13
  • 20
  • 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. – akhouri Jul 01 '16 at 04:29
  • hmm, why not create a new directive to contain the logic for ng-form? That way it'll only be two lines – derp Jul 01 '16 at 04:33
  • 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 – akhouri Jul 01 '16 at 06:34