Add ng-if attribute to a element from within a directive

Question

I have a AngularJS directive which takes an ID and makes a lookup on this ID to get col-width, hide-state and order for a given flexbox element.

What I d like to do is to add a ng-if=false attribute to the element if its hide-state is true. Is there any way, how I can add ng-if attribute from within a directive to a element?

My current code:

    .directive("responsiveBehaviour", ['ResponsiveService', function(ResponsiveService){
    var linkFunction = function(scope, element, attributes){
        var id = attributes["responsiveBehaviour"];
        var updateResponsiveProperties = function(){
            element.attr("column-width", ResponsiveService.getWidth(id));
            if(ResponsiveService.getOrder(id)){
                element.attr("order", ResponsiveService.getOrder(id));
            }
            if(ResponsiveService.getHidden(id) == true){
                element.attr("hidden", "");
            } else {
                element.removeAttr("hidden");

            }
        };
        if(id) {
            scope.$watch('device', function () {
                updateResponsiveProperties();
            });
        }
    };

If I add

element.attr("ng-if", false);

instead of

element.attr("hidden", "");

it just renders out the ng-if attribute to the element but there is no action happening, so the element is still rendered and visible although ng-if is false.

Do you have any idea on how to achieve what I am looking for?

Thanks in advance.

Greets

I think then you need to use $compile service to compile element after adding ng-if attribute. — Jenish Rabadiya
– Jenish Rabadiya, Commented Feb 20, 2015 at 5:26
Thanks for the feedback. How do I have to do that? Could you give me a sample? — mooonli
– mooonli, Commented Feb 20, 2015 at 5:27

Jenish Rabadiya · Accepted Answer · 2015-02-20 17:54:17Z

0

something like below:

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
});

app.directive( 'test', function ( $compile ) {
  return {
    restrict: 'E',
    scope: { text: '@' },
    template: '<p ng-click="add()">Jenish</p>',
    controller: function ( $scope, $element ) {
      $scope.add = function () {
        var el = $compile( "<test text='n'></test>" )( $scope );
        $element.parent().append( el );
      };
    }
  };
});

working plunk is here

Update

Here is simple example as you requested.

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.add = function () {
    alert('Jenish');
    $scope.cond = false;
  }
  $scope.cond = true;
});

app.directive( 'test', function ( $compile ) {
  return {
    restrict: 'E',
    
    template: '<p ng-click="add()">Click me to hide</p>',
    link: function ( $scope, $element, attr ) {
      
      var child = $element.children().attr('ng-if', 'cond') 
      console.log($element)
      $compile(child)($scope);
    }
     
  };
});

<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="[email protected]" src="https://code.angularjs.org/1.3.13/angular.js" data-semver="1.3.13"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <p>Hello {{name}}!</p>
    <test></test>
  </body>

</html>

I hope this would help you.

edited Feb 20, 2015 at 17:54

answered Feb 20, 2015 at 5:33

Jenish Rabadiya

6,7766 gold badges35 silver badges62 bronze badges

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

3 Comments

mooonli Over a year ago

okay. but how would I have to adjust my existing code? Because I dont like to add a whole element but only a attribute?

Jenish Rabadiya Over a year ago

@marcbaur I think you just want to know how to use compile service of angular. however I will update my answer with simple demonstration of what you want later.

Jenish Rabadiya Over a year ago

@marcbaur You may have look. I have updated my answer.

Collectives™ on Stack Overflow

Add ng-if attribute to a element from within a directive

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related