Get current state of ui-router with ng-if

Question

I have two buttons. I want to use ng-if to make sure that one of the buttons is visible only when you are at a certain page in the application.

I want to other button to be visible everywhere in the application EXCEPT when you are at that certain page.

So I thought that I could use ng-if.

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 my controller i'm using the regular ui-router syntax (like below)

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

However this does not work: How can I access the current state of the UI router and use it to evaluate whether my button should be visible or not?

Answer 1

You'll have to expose the state in your scope.

Controller:

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

View:

<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

您可以在此处使用$location.path()这样。

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

Answer 3

Much simpler is to use ui-sref-active directive, add a class that show the element and that it

Example

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

And then in your css:

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