如何在 index.html 页面中使用基于 url 的 ng-if？

Question

如果 url 在某些嵌套视图中，我想在索引页中使用 ng-hide。在我的 index.html 中，我想要这样的东西：

    <top-bar ng-if="!home"></top-bar>
    <ui-view class="reveal-animation"></ui-view>
    <bottom-bar ng-if="!home"></bottom-bar>

我希望当我进入 "home" 视图时，条形图会消失。正如我在这里看到的相同问题 - 答案是在控制器中使用 $location，但是索引页面的控制器在哪里？

谢谢

Answer 1

一口气教会你一切并不容易。你必须参考几个概念。

http://viralpatel.net/blogs/angularjs-routing-and-views-tutorial-with-example/

我希望这篇 link 能帮助您开始使用 Angularjs。

Answer 2

在父控制器中，添加以下内容：

$scope.isHome = function(){
  return $state.is("home");
}

然后像这样更改您的模板：

<top-bar ng-if="!isHome()"></top-bar>
<ui-view class="reveal-animation"></ui-view>
<bottom-bar ng-if="!isHome"></bottom-bar>

Check this plunkr here 查看一些实时代码。

另一种方法是使用 $stateChangeSuccess，像这样：

$scope.$on("$stateChangeSuccess", function(event, toState){
  $scope.isHome = (toState.name == "home")
})

我还建议查看 $state.includes、$state.current 等。只需阅读文档 here

how can I use ng-if based on url in the index.html page?