使用ng-if获取ui-router的当前状态

Question

我有两个按钮。 我想使用ng-if来确保仅当您位于应用程序中的某个页面时，这些按钮之一才可见。

我希望其他按钮在该页面上除应用程序之外的任何地方都可见。

所以我认为我可以使用ng-if。

按钮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>

按钮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>

在我的控制器中，我正在使用常规的ui-router语法（如下所示）

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

但是，这不起作用：如何访问UI路由器的当前状态，并使用它评估我的按钮是否应该可见？

Answer 1

您必须公开范围内的状态。

控制器：

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

视图：

<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

更简单的方法是使用ui-sref-active指令，添加一个显示元素的类，

例

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

然后在您的CSS中：

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