17

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

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

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

这里有一个类似的问题：Refresh header page in angularjs AngularJS - 处理重复的片段，如 Header 和 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 中放置了一个断点...它仅在我刷新整页时才会执行。我在这里做错了什么？

4

2 回答 2

19

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

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

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

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

有对象参考，没有$watch：http ://plnkr.co/edit/2u2ZDE?p=preview

于 2013-10-20T10:29:31.330 回答
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')
})   
}
于 2013-10-20T09:40:20.060 回答