Holen Sie sich den aktuellen Stand des UI-Router mit ng-if

Question

Ich habe zwei Tasten. Ich möchte ng-if verwenden, um sicherzustellen, dass eine der Schaltflächen nur sichtbar ist, wenn Sie sich auf einer bestimmten Seite der Anwendung befinden.

Ich möchte andere Schaltfläche überall in der Anwendung sichtbar sein, außer wenn Sie auf dieser bestimmten Seite sind.

Also dachte ich, dass ich ng-if verwenden könnte.

BUTTON 1

<md-button ng-if="$state.current.path === example" class="md-icon- button" aria-label="More" ui-sref="health"> 
      <md-icon md-svg-icon="images/back.svg"></md-icon> 
      </md-button> 

BUTTON 2

 <md-button ng-if="!($state.current.path === example)"class="md-icon-button" aria-label="More" ng-click="toggleHamburger()"> 
      <md-icon md-svg-icon="images/menu.svg"></md-icon> 
     </md-button> 

In meinem Controller Ich bin die reguläre ui-Router-Syntax (wie unten)

.state('example', { 
     url: "/example", 
     templateUrl: "components/examples/example.html" 
    }) 

jedoch dies nicht Arbeit: Wie kann ich auf den aktuellen Zustand des UI-Routers zugreifen und diesen verwenden, um zu bewerten, ob meine Schaltfläche sichtbar sein soll oder nicht?

Answer 1

Sie müssen den Status in Ihrem Bereich angeben.

Controller:

// ... stuff 
$scope.currentPath = $state.current.path 
// ... more stuff 

Ausblick:

<md-button ng-if="currentPath === 'example'" class="md-icon- button" aria-label="More" ui-sref="health"> 
    <md-icon md-svg-icon="images/back.svg"></md-icon> 
</md-button> 

Answer 2

Sie $location.path() hier wie diese verwenden können.

ng-if="$location.path() === example" 

Answer 3

Viel einfacher ist ui-sref aktive Richtlinie zu verwenden, fügen Sie eine Klasse, die das Element zeigen und dass es

Beispiel

<ui-sref-active="show-element" class="md-icon-button ng-hide" 

Und dann in Ihrem CSS:

.show-element { 
    display: block/inline-block; 
}