AngularJS:将角度服务属性绑定到范围

AngularJS: Bind angular service property to scope

本文关键字：属性 绑定 范围 服务 AngularJS      更新时间：2023-09-26

场景

  • 我有一个维护用户(布尔(sessionStatus的服务UserService。
  • 视图有条件地在ng-show=sessionStatus上显示 [LOGOUT](即，如果未登录(假(，则不显示(。
  • 因此，ViewController sessionStatus应始终与UserService相匹配......右？
  • 如果在 [LOGOUT] 可见时单击它，它会执行一些日志输出操作，sessionStatus值更改，并且视图应更新为新的ng-show...结果。

问题

  1. 目前，单击注销似乎不会更新 var UserService.sessionStatus？
  2. 当 UserService.logout(( 发生并更改 UserService.sessionStatus 时，如何保持 $scope.sessionStatus 更新？
    • 如何将变化$scope映射到 ng-show？

文件

视图

    <a ng-show="sessionStatus" ng-click="logout()">Logout</a>

视图控制器

    app.controller('AppController', function($scope, $interval, $http, UserService) {
      $scope.logout = function() { UserService.logout(); }
      // This ain't working
      $scope.$watch(UserService.sessionStatus, function() {
          $scope.sessionStatus = UserService.sessionStatus;
      });
    });

用户服务

注意：appUser 是 HTML 头中注入的全局变量(在我让会话/cookie 内容正常工作之前是一个黑客修复(

  app.factory('UserService', function($http) {
    var pre;
    var sessionStatus;
    function init() {                   // Logged in  : Logged out             
      pre = appUser.user != undefined ? appUser.user  : { name: 'Logged out', uid: '0' };
      sessionStatus = pre.uid != "0"  ? true          : false;
    }
    function resetSession() { appUser = null; init(); }
    init();
    return {
      sessionStatus: function() { return sessionStatus; }, // update on change!
      logout: function() {
        $http.get("/logout").then(function (data, status, headers, config) {
          resetSession();
        })
      }
    };
  });

而不是watch，只需使用从service返回会话状态的作用域function。

$scope.sessionStatus = function() {
    return userService.sessionStatus();
};

您的注销链接如下所示：

<a ng-show="sessionStatus()" ng-click="logout()">Logout</a>
为您的

功能精简的 Plunker：http://plnkr.co/edit/u9mjQvdsvuSYTKMEfUwR?p=preview

使用作用域函数更简洁，是执行此操作的"正确"方法。然而，为了完整起见，您也可以修复您的手表：

$scope.$watch(function () {
    return UserService.sessionStatus;
}, function() {
    $scope.sessionStatus = UserService.sessionStatus;
});

$watch方法的第一个参数采用 WatchExpression，该表达式可以是字符串或方法。

但同样，$watch不应在控制器中使用。按照建议使用作用域方法更简洁且更易于测试。

相关文章：