处理AngularJS中的页眉和页脚

Question

我一直在尝试在Angular JS App中实现页眉/页脚。 我想在主index.html中添加这些作为ng-include。 但是，如果页眉和页脚是静态页面，这将起作用。 我的情况稍有不同......在登录页面中没有显示页眉/页脚。 其他页面取决于您是否登录，您必须显示“欢迎用户[注销]”或“欢迎客人[登录]”。

我将登录信息和isLoggedIn保存在服务中 - 然后使用HeaderCtrl控制器将其复制到$ scope。 最大的问题似乎是整个ng-include在注销时没有刷新。 因此，使用ng-show hide指令的div将不会隐藏/显示更改。 有人建议使用ng-switch - 它的行为方式也一样。

如果我在单个视图中移动标题代码，那么一切都很好。

类似的问题在这里： angularjs中的刷新页眉 AngularJS - 处理重复的片段，如页眉和页脚

我之前已经问过这个问题，但是当我从rootScope中移动记录变量时，答案对我没有帮助。 问题是我的HeaderCtrl只在整页刷新时执行。 不在Angular页面导航等上执行

这是代码：index.html：

<body ng-app="greenhornApp">
    <div id="navbar" ng-controller="HeaderCtrl"><div ng-include src="'views/partials/header.html'"></div>
    </div>
    <div class="title-spacer visible-desktop"></div>
    <!-- Add your site or application content here -->
    <div class="wrapper" ng-view></div>
</body>

header.js：

angular.module('greenhornApp')
  .controller('HeaderCtrl', ['$scope', 'LoginService', function ($scope, loginService) {
    $scope.isLoggedIn = loginService.isLoggedIn();
    $scope.session = loginService.getSession();
  }]);

了header.html

<div>
  <div ng-show="isLoggedIn">
    <div class="navbar navbar-inverse navbar-fixed-top">
More stuff here....
    </div>
  </div>
</div>

我正在使用ng-route和angular 1.2.0-rc3。 我在HeaderCtrl中放了一个断点......它只在我进行整页刷新时执行。 我在这做错了什么？

Answer 1

如果您的loginService.isLoggedIn()绑定到原始值而不是对象，则HeaderCtrl需要使用$watch来监视变量并在其更改时获取新值。

要使它在没有$watch情况下工作，您需要确保将对象引用从loginService传递到HeaderCtrl 。

我做了两个快速的掠夺者，希望能够很好地复制你的情况，以提供一些指导：

使用原始和$watch ： http ： //plnkr.co/edit/LvtVEE？p = preview

使用对象引用并且没有$watch ： http ： //plnkr.co/edit/2u2ZDE？p = preview

Answer 2

编辑：我原来的推理是错误的。 检查tasseKATT的答案。

这是使用angularJS broacasting机制在控制器之间进行通信的另一种方式

这是一个jsfiddle只是为了显示基本的想法。

var module = angular.module("demo", []);

function Header ($scope){

   $scope.userIsLoggedIn = true

   $scope.$on('DO_LOGOUT',function(event){
    alert('Header is updating log-status')
    $scope.userIsLoggedIn=false
   })
}
function Dynamic($scope){

 $scope.logout =function(){
    $scope.$emit('LOGOUT_REQUESTED')
  }
}

function Root($scope) {

$scope.$on('LOGOUT_REQUESTED',function(event){
    alert('Rootscope got logout event')
    $scope.$broadcast('DO_LOGOUT')
})   
}

处理AngularJS中的页眉和页脚

问题描述

2 个解决方案

解决方案1
19 已采纳 2013-10-20 10:29:31

解决方案2
2 2013-10-20 09:40:20

处理AngularJS中的页眉和页脚

问题描述

2 个解决方案

解决方案1 19 已采纳 2013-10-20 10:29:31

解决方案2 2 2013-10-20 09:40:20

解决方案1
19 已采纳 2013-10-20 10:29:31

解决方案2
2 2013-10-20 09:40:20