javascript - 如何添加 $watch 来跟踪 Angular 指令内 $cookies 中的值

Question

当 $cookies 中的值发生变化时，我很难获得动态更新的指令。基本上，它是一个登录/注销系统，其中应根据用户是否登录显示或隐藏自定义指令。下面是我到目前为止的代码。我知道我的指令非常杂乱，而且可能很臃肿，但我试图在清理它之前将其功能到位。

目前，除非手动刷新整个页面，否则登录后不会显示 adminLogin 指令。另外，除非我将 $scope.loggedInUser = false; 添加到 logout() 函数，否则该指令在注销后不会消失，这不是我想要的。我的问题是在指令中使用 $watch 的推荐方法是什么，以便它根据 $cookies.loggedInUser 值显示/隐藏？

我已经尝试将 $cookies.loggedInUser 添加为 $watch 函数的第一个参数，我的逻辑是对其值的任何更改都会触发内部代码该函数，但似乎在指令内不起作用，我不知道为什么。

我现在已经花了几天时间，我想我已经尝试了其他 SO 问题以及谷歌搜索和阅读文档提供的每个 Angular 。但到目前为止还没有任何效果，因此非常感谢任何指导!

登录CTRL

.controller('AdminLoginCtrl', ['$scope', '$rootScope', '$location', '$cookies', 'AuthService', 'flashMessageService', '$log',
        function($scope, $rootScope, $location, $cookies, AuthService, flashMessageService, $log) {
          // $scope.adminLoggedIn = false;

          $scope.credentials = {
            username: '',
            password: ''
          };

          $scope.login = function(credentials) {
            console.log('in login....');
            AuthService.login(credentials).then(
              function(res) {

               // THIS SHOULD BE WATCHED INSIDE DIRECTIVE TO SHOW/HIDE TEMPLATE
                $cookies.put('loggedInUser', res.data);

                // USER SAVED TO COOKIES FINE HERE
                console.log('User from Cookies...', $cookies.get("loggedInUser"));

                $location.path('/admin/pages');
              },
              function(err) {
                flashMessageService.setMessage(err.data);
                $log.log(err);
              });
            };
        }
    ])

已登录指令

angular.module('myApp.directives', ["ngCookies"])
  .directive('adminLogin', ['$rootScope','$cookies','AuthService','flashMessageService','$location',
    function($rootScope,$cookies,AuthService,flashMessageService,$location) {
      return {
        controller: function($scope, $cookies,$rootScope) {

// CONSOLE LOG IN DIRECTIVE CONFIRMS LOGGED IN USER IS SAVED IN COOKIES
          console.log("Func called in DIRECTIVE ", $cookies.get("loggedInUser"));
          $scope.loggedInUser = $cookies.get("loggedInUser");

          /* NEED HELP WITH WATCH IMPLEMENTATION */
          $scope.$watch(/* what to watch */, function(newVal, oldVal) {
            console.log('WATCH ', nVal, oVal);
            /* ??? */
          })

          console.log('logInUser In Dir ', $scope.loggedInUser);

          $scope.logout = function() {
            console.log('Logout in Directive...');
            AuthService.logout().then(
              function() {
                $cookies.remove('loggedInUser'); // Want this to be watched
                $scope.loggedInUser = false; // Works but not ideal!
                $location.path('/admin/login');
                flashMessageService.setMessage("Successfully logged out");

              }, function(err) {
                  console.log('there was an error tying to logout', err);
              });
          };

        },
        templateUrl: 'partials/directives/admin-login.html'
      };
    }
  ])

指令模板

<div ng-if='loggedInUser'>
    Welcome {{loggedInUser}} |  <a href="admin/pages">My Admin</a> | <a href ng-click='logout()'>Logout</a>
</div>

Answer 1

使用模板中的函数来检查cookie:

<div ng-show="loggedInUser=getUserCookie()">
    Welcome {{loggedInUser}} |  <a href="admin/pages">My Admin</a> | <a href ng-click='logout()'>Logout</a>
</div>

JS

$scope.getUserCookie = function() {
    var loggedInUser = $cookies.get('loggedInUser');
    return loggedInUser;
};

在每个摘要周期中，该函数都会检索 cookie 的最新值。