Remove directive dynamically

Question

I have an directive (my-header) to make the header area fix while page scrolling up. I want to remove the directive on a button click.

<div class="partialInner" id="fixedHeader" my-header>
      <div class="col-md-12 col-xs-12 col-sm-12 paddingZero">
        <ng-include src="'topNavi.html'"> </ng-include>
      </div>
      <div class="col-md-12 col-xs-12 col-sm-12 paddingZero">
        <ng-include src="'middle.html'"> </ng-include>
      </div>
</div>

Remove

when click on the myBtn I want to take the "my-header" attribute out of my code

Appreciate any anwser

Answer 1

Execute this code when your button is pressed

$document.getElementById("fixedHeader").removeAttribute("my-header");

Answer 2

You can use ng-show or ng-if.

<div class="partialInner" id="fixedHeader" my-header ng-if="isHeader" ng-init="isHeader = true">
      <div class="col-md-12 col-xs-12 col-sm-12 paddingZero">
        <ng-include src="'topNavi.html'"> </ng-include>
      </div>
      <div class="col-md-12 col-xs-12 col-sm-12 paddingZero">
        <ng-include src="'middle.html'"> </ng-include>
      </div> 
</div>

And in your button click, you can make isHeader to false.

<button ng-click="isHeader = false"> Hide header </button>