如何在 angular ng-view 中隐藏 index.html 页面的某些内容？

Question

我想知道在 angularjs 中访问视图时是否可以隐藏 index.html 文件中的某些部分。

我的 index.html 文件在所有视图上都包含一个底部菜单栏，我创建了一个 home.html 视图，我不想在其中包含该菜单栏。 angular 这可能吗？

谢谢！

Answer 1

是的，你可以做到这一点

例如，您的底栏为

<div>This is bottom bar<div>

现在将其更改为

 <div ng-hide="hideit">This is bottom bar<div>

现在在 home.html 的控制器中只写 $rootScope.hideit = true;

应用程序中任何你想保持底栏可见的地方只要做$rootScope.hideit = false;

Answer 2

少$rootScope

$rootScope 的问题在于您将向代码添加依赖项。 maddygoround 的回答很好，但是您的 index.html、home.html 和控制器都将是硬连接的，更改会有点困难。

为了摆脱 $rootScope，我将进行以下更改：

<div ng-hide="hideit">This is bottom bar<div>

这与 maddygoround 发布的代码相同，它做了它应该做的事情。现在，不是到达 home.html 控制器并更改 hideit，而是添加一个侦听器来更改路由。

可以将下面的代码添加到与 angular.module();

声明相同的文件中

app.run(function($rootScope, $location){
  $rootScope.$on('$routeChangeStart', function(event, next, current){
    if ($location.path() == '/home') {
      $rootScope.hideit = true;
    };
  });
});

这将使您的 index.html 独立于 home.html 控制器中发生的事情。这是更多的代码，但可以在将来挽救您的生命。我正在尝试摆脱 $rootScope，如果可以的话，我会在没有 $rootScope 的情况下更新我的答案。

如何在 angular ng-view 中隐藏 index.html 页面的某些内容？

How can I hide certain contents of index.html page in an angular ng-view?

angularjs

angularjs-directive

ng-view

ng-hide