如何在特定页面的角应用中显示或隐藏标题?

时间:2016-02-17 04:21:04

标签: javascript html angularjs express mean-stack

我很抱歉这个问题有多普遍。我的其中一门课程非常......轻松地教授,所以我甚至不能理解我想要问的内容。

我正在开发的应用程序是按照课堂指南开始的。基本上我安装了ruby,node,sass,bower,grunt,yo和 generator-meanjs ,我相信这是:https://github.com/meanjs/generator-meanjs。然后我被告知要运行 yo meanjs ,并且像魔术那样出现了一个正在运行的MEAN堆栈应用程序。

此应用的核心组件之一是标题,该标题通过此行插入标题为 layout.server.view.html 的文件中:

<header ng-hide="{{hideHeader}}" ng-include="'/modules/core/client/views/header.client.view.html'" class="navbar navbar-fixed-top navbar-inverse"></header>

ng-hide="{{hideHeader}}"部分是我的补充。

文件layout.server.view.html似乎使用一些swig模板和ui-views包围所有其他视图。

从layout.server.view.html引用的其他变量,如下所示:

<meta property="fb:app_id" content="{{facebookAppId}}">

似乎来自一个名为express.js的文件,该文件名为initLocalVariables,方法是做

app.locals.facebookAppId = config.facebook.clientID;

我希望能够做的是随意禁用(隐藏)此标头,或者至少取决于我所在的页面。例如,我想要一个没有标题的页面,纯粹是为了列出数据。

到目前为止,我已经找到了一种可靠的方法:制作一个新的路由,路由到不包含标题的布局以外的页面。这个问题是,其他一切也都消失了。

理想情况下,我希望我可以在控制器中为给定页面执行类似$scope.hideHeader = true的操作,但它不起作用。然后我想也许我需要访问app.locals.hideHeader并将其设置为true,但我不知道如何从控制器中做到这一点。

我不明白所有这些是如何组合在一起的,我希望有人可以帮助我提供一些资源,以便我可以理解所有这些。

提前谢谢。

1 个答案:

答案 0 :(得分:1)

您可以在AngularJS中完成以下几个选项:

1)如果它只是针对您要隐藏标题的一条路线,您可以检查您的控制器是否通过执行类似的操作来检查当前路线(甚至可能与建议的$rootScope集成):< / p>

$scope.hideHeader = ($location.path() === '/my-route-without-header') ? true : false;

2)如果有许多路径应该隐藏标题,你应该稍微更改逻辑并传递每个路由/状态的属性。 示例here