在 Mean.js 应用程序中显示和隐藏 header 导航

Question

我正在使用 Yeoman Mean.js generator 构建博客。到目前为止，我真的很喜欢与 Mean.js 一起工作，但是我对 Angular 开发还比较陌生，所以有些事情还不适合我。

我想在我的应用程序的所有页面上隐藏 header，并且仅在我登录时显示它。我将从 header 中提取注册并登录从一个位置进入以管理我的博客。

我尝试在 /app/views/layout 中的 <header> 元素上使用 ng-show="topbarActive"。server.view.html:

<header ng-show="topbarActive" data-ng-include="'/modules/core/views/header.client.view.html'" class="navbar navbar-fixed-top navbar-default"></header>

然后我尝试在 /public/modules/core/controllers/home 中将此变量显式设置为 false。client.controller.js:

$scope.topbarActive = false;

我在/public/modules/users/controllers/authentication.client.controller.js中把这个值设为true，希望能手动ping http://localhost:3000/#!/signup 看看我的 header 吧。

设置完成后，我在任何地方都看不到 header。鉴于我是 'The Angular Way' 的新手，我缺少哪些步骤才能实现我正在寻找的行为。我对 Mean.js 如何构建它的依赖关系感到困惑吗？

Answer 1

AngularJS 中的一个关键概念是范围界定。在这种特殊情况下，您的控制器 HomeController 被分配给第一个 div header。这使得 HomeController 范围对它的 parent (header) 不可用，它实际上根本没有任何控制器。

要使您的配置生效，请添加一个新的控制器，例如：

/* /public/modules/core/controllers/body.client.controller.js */
'use strict';

angular.module('core').controller('BodyController', ['$scope', 'Authentication', 'Menus',
    function($scope, Authentication, Menus) {
        $scope.topbarActive = true;
    }]);

然后将此控制器添加到 layout.server.view.html 中的 body：

<body ng-cloak ng-controller="BodyController">

或者，您可以只为您的标签创建一个控制器，这取决于您接下来的目标。

在 Mean.js 应用程序中显示和隐藏 header 导航

Showing and hiding header nav in Mean.js app

angularjs

meanjs