如何添加$ watch以跟蹤Angular指令中$ cookies的值

我很難在$ cookie中的值發生更改時獲取指令來動態更新。基本上，它是一個登錄/註銷系統，根據用戶是否登錄，應該顯示或隱藏自定義指令。以下是我到目前爲止的代碼。我知道我的指令非常糟糕，可能臃腫，但我正試圖在清理之前將功能置於原地。

目前adminLogin指令在登錄後不會顯示，除非手動刷新整個頁面。此外，該指令在註銷後不會消失，除非我將$scope.loggedInUser = false;添加到logout()函數，這不是我想要的。我的問題是，在指令中使用$watch的建議方式是什麼，以便根據$cookies.loggedInUser值顯示/隱藏？

我已經嘗試添加$cookies.loggedInUser作爲$watch函數的第一個參數，我的邏輯是任何對其值的更改都會觸發函數內的代碼，但似乎不在指令內工作，而我不知道爲什麼。

我已經花了幾天時間了，現在我想我已經嘗試了從其他SO問題以及谷歌搜索和閱讀文檔提供的每個角度。但迄今沒有任何工作，所以任何指導都非常感謝！

LOGIN 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); 
       }); 
      }; 
     } 
    ])

登錄DIRECTIVE

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' 
     }; 
    } 
    ])

DIRECTIVE模板

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

來源

2017-04-18 mikeym

使用模板功能檢查Cookie：

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

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

在每個週期消化，功能檢索cookie的最新值。

來源

2017-04-18 22:03:02 georgeawg

太棒了！這完美而優雅地解決了這個問題。非常感謝！ – mikeym

你不能手錶$cookies。

如果您想通知您的指令發生了什麼事情，您可以在根作用域上廣播某些內容並在您的指令中監聽該內容，或者在用戶登錄並觀看時將數據存儲在AuthService中。

來源

2017-04-18 20:58:36

如何添加$ watch以跟蹤Angular指令中$ cookies的值

回答

相關問題