CODEWITHSUNDEEP
javascriptangularjs
windupurnomo
windupurnomo

Reputation: 1190

AngularJS directive not working where element have a binding value

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>

Upvotes: 1

Views: 320

Answers (2)

martin
martin

Reputation: 96979

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>

Upvotes: 1

Noy
Noy

Reputation: 1268

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>

Upvotes: 1

Related Questions