AngularJS directive not working where element have a binding value

Question

I have a directive to show/hide element based on something. But it doesn't work where element have binding to some value. I want my directive still working in this condition.

angular.module("app", [])

.controller('ctrl', function ($scope){
  $scope.color = "red";
})


.directive('xred', function() {
  return {
    link: function(scope, element, attrs) {
      var role = 0;
      if (role === 0) element.css('display', 'none');
    }
  };
  
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="ctrl">
  
  <!-- where I hard code 'blue', xred directive is working-->
  <span xred style="color: blue"> Blue (should hide) </span>
  
  <!-- where I bind color, xred directive is not working.-->
  <span xred style="color: {{color}}"> Red (should hide) </span>
  
</div>

Noy · Accepted Answer · 2016-02-14 10:14:37Z

1

Not sure I understood your question, but using ngStyle it seems to work:

angular.module("app", [])

.controller('ctrl', function ($scope){
  $scope.color = "red";
})


.directive('xred', function() {
  return {
    link: function(scope, element, attrs) {
      var role = 0;
      if (role === 0) element.css('display', 'none');
    }
  };
  
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="ctrl">
  
  <!-- where I hard code 'blue', xred directive is working-->
  <span xred style="color: blue"> Blue (should hide) </span>
  
  <!-- where I bind color, xred directive is not working.-->
  <span xred ng-style="{color: color}"> Red (should hide) </span>
  
</div>

answered Feb 14, 2016 at 10:14

Noy

1,2682 gold badges11 silver badges28 bronze badges

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

Comments

martin · Accepted Answer · 2016-02-14 10:31:01Z

Because you set a style using Angular's interpolation it now keeps track of it's attribute value itself and any change you made by touching directly the element will be overridden by Angular anytime (like setting display: none which basically just modifies the style attribute which is then overridden by color: {{color}}).

So in your case try not writing directly into style attribute and use ngStyle or ngClass instead.

I added just class hidden to your example and add/remove it to show/hide your element.

angular.module("app", [])

.controller('ctrl', function ($scope){
  $scope.color = "red";
})


.directive('xred', function() {
  return {
    link: function(scope, element, attrs) {
      var role = 0;
      if (role === 0) {
          element.addClass('hidden');
      }
    }
  };
  
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<style>
  .hidden { display: none; }
</style>

<div ng-app="app" ng-controller="ctrl">
  
  <!-- where I hard code 'blue', xred directive is working-->
  <span xred style="color: blue"> Blue (should hide) </span>
  
  <!-- where I bind color, xred directive is not working.-->
  <span xred style="color: {{color}}"> Red (should hide) </span>
  
</div>

Collectives™ on Stack Overflow

AngularJS directive not working where element have a binding value

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related