Угловая директива - как создать динамические «параметры страницы»

Question

У меня есть div, который появляется на всех страницах моего сайта.

Я хочу, чтобы отобразить его везде, но с различными данными в соответствии с текущим состоянием (я использую маршрутизатор UI для angular1)

Так что я решил, что я должен использовать директиву.

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

Но я не знаю, как вставить логику, которую я написал в комментариях в HTML.

Я хотел бы получить некоторые советы по этому

Answer 1

Вы должны иметь возможность ввести $ state службу в свою директиву и использовать ее в своей разметке, чтобы проверить текущее состояние, используя ng-hide или ng-show. Надеемся, что это получает Вас довольно близко:

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

шаблона:

<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

может быть, это поможет:

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> 

использование директивы например:

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