Angular Directive - wie man eine dynamische "page-options" erstellt

Question

Ich habe ein div, das auf allen Seiten meiner Website erscheint.

Ich will es überall angezeigt werden, aber mit unterschiedlichen Daten entsprechend den aktuellen Zustand (ich verwende UI-Router für angular1)

Also soll ich habe ich beschlossen, eine Richtlinie verwenden.

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" 
    }; 
}); 

Aber ich weiß nicht, wie die Logik einzufügen, die ich in den Kommentaren geschrieben im HTML.

Ich würde gerne ein paar Ratschläge bekommen auf dieser

Answer 1

Sie sollten in der Lage sein, den Dienst $ state in Ihre Anweisung einzufügen und ihn in Ihrem Markup zu verwenden, um den aktuellen Status mithilfe von ng-hide oder ng-show zu überprüfen. Hoffentlich bekommt man ziemlich nah dran:

myApp.directive('pageinfo', ['$state', function($state) { 
    return { 
     restrict: 'A', 
     templateUrl: "./components/pageinfo/pageinfo.html" 
     link: function(scope) { 
      scope.currentState = $state.current.name; 
     } 
    }; 
}); 

Vorlage:

<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

vielleicht würde dies helfen:

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> 

Richtlinie Gebrauch so:

<pageinfo state="get your state and put it in here"></pageinfo>