Angular Directive - how to create a dynamic "page-options" - angularjs

Question

I have a div which appears in all the pages of my website.
I want to display it everywhere but with different data according to the current state (I'm using UI router for angular1)
So I decided I should use a directive.
pageoptions.html
<div class="page-options">
<!-- if state = 'dashboard' -->
<h1>Dashboard</h1>
<a ui-sref="restore">Some Action</a>
<a ui-sref="backup">Another Action</a>
<!-- if state = 'Edit' -->
<h1>Edit</h1>
<a ui-sref="restore">Delete</a>
<!-- if state = 'settings' -->
<h1>Settings</h1>
<a ui-sref="backup">Settings</a>
</div>
pageoptions-directive.js
myApp.directive('pageinfo', function() {
return {
restrict: 'A',
templateUrl: "./components/pageinfo/pageinfo.html"
};
});
But I don't know how to insert the logic that I wrote in comments in the HTML.
I would love to get some advice on this

Answer 1

You should be able to inject the $state service into your directive and use it in your markup to check the current state, using ng-hide or ng-show. Hopefully this gets you pretty close:
myApp.directive('pageinfo', ['$state', function($state) {
return {
restrict: 'A',
templateUrl: "./components/pageinfo/pageinfo.html"
link: function(scope) {
scope.currentState = $state.current.name;
}
};
});
template:
<div class="page-options">
<!-- if state = 'dashboard' -->
<div ng-show="currentState == 'dashboard'">
<h1>Dashboard</h1>
<a ui-sref="restore">Some Action</a>
<a ui-sref="backup">Another Action</a>
</div>
<div ng-show="currentState == 'Edit'">
<!-- if state = 'Edit' -->
<h1>Edit</h1>
<a ui-sref="restore">Delete</a>
</div>
<div ng-show="currentState == 'settings'">
<!-- if state = 'settings' -->
<h1>Settings</h1>
<a ui-sref="backup">Settings</a>
</div>
</div>

Answer 2

maybe this would help:
directive.js:
myApp.directive('pageinfo', function() {
return {
restrict: 'EA',
scope: {
state: '=' // if you want take a sting in directive , use '#'
},
templateUrl: "./components/pageinfo/pageinfo.html"
};
});
template.html:
<div class="page-options">
<!-- if state = 'dashboard' -->
<div ng-show="state == 'dashboard'">
<h1>Dashboard</h1>
<a ui-sref="restore">Some Action</a>
<a ui-sref="backup">Another Action</a>
</div>
<!-- if state = 'Edit' -->
<div ng-show="state == 'Edit'">
<h1>Edit</h1>
<a ui-sref="restore">Delete</a>
</div>
<!-- if state = 'settings' -->
<div ng-show="state == 'settings'">
<h1>Settings</h1>
<a ui-sref="backup">Settings</a>
</div>
</div>
use directive like this:
<pageinfo state="get your state and put it in here"></pageinfo>