角度指令 - 動的 "ページオプション"を作成する方法

Question

私のウェブサイトのすべてのページに表示されるdivがあります。

私は、だから私は、私はディレクティブを使用する必要がありますことを決めた

（私はangular1ためのUIのルータを使用しています）現在の状態に応じてどこにでもあるが、異なるデータでそれを表示したいです。

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

ng-hideまたはng-showを使用して、あなたの指示に$ stateサービスを注入し、マークアップでそれを使って現在の状態を確認できるはずです。うまくいけば、これはかなり近いあなたを取得：

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>