Question

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

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

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

类似的问题在这里：Refresh header page in angularjs AngularJS - Handle repeated fragments like Header and Footer

我之前已经问过这个问题，但是当我从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广播机制在控制器之间进行通信的另一种方式

这里有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 个答案: