同步使用跨頁變量angularJs

Question

我有一個HTML頁面的鏈接如下：

<div ng-if="!adminCtrl.valid"> 
    <div><a target="_blank" ng-href="https://api.instagram.com/oauth/authorize/?client_id=xxx&redirect_uri=http://localhost:8888/igSuccess.html&response_type=token">Authorize to Instagram</a><br/></div> 
    </div> 

這一切都成功重定向頁面，代碼是

<div ng-controller="AdminController"> 
     <h2>You can close this tab/window</h2> 
    </div> 

的控制是相同的這兩個頁面如下：

app.controller('AdminController', ['$scope','$routeParams','$location', function($scope,$routeParams,$location){ 
     var actrl = this; 
     actrl.valid = false; 

     var token = $location.absUrl(); 
     if(token.indexOf('access_token') > -1){ 
      console.log('found token so will do special'); 
      actrl.valid = true; 
      $scope.$apply(); 
     } 
}} 

我期待鏈接消失一旦新頁面打開，因爲我更新確定有效的變量值。

我知道這個漏洞似乎是跨頁面溝通。那麼如何處理呢？

Answer 1

當您更改視圖時，控制器會「刷新」。要將數據從視圖/控制器保存到另一個，請將數據存儲在服務中。

UPDATE

控制器：

app.controller('AdminController', [ 
    '$scope', '$routeParams', '$location', 'ExampleService', function ($scope, $routeParams, $location, ExampleService) { 
     var actrl = this; 
     // Watches the service's value for changes and applies it to the controller 
     $scope.$watch(function(){return ExampleService.valid}, function(newValidValue){ 
      actrl.valid = ExampleService.valid; 
     }); 


     var token = $location.absUrl(); 
     if (token.indexOf('access_token') > -1) { 
      console.log('found token so will do special'); 
      ExampleService.valid = true; 

      // No need for this 
      // $scope.$apply(); 
     } 
    } 
} 

服務：

app.service('ExampleService', [ 
    function() { 
     //All properties here are kept through-out your app's life time 
     this.valid = false; // Init to false 
    } 
} 

Answer 2

要共享控制器之間的數據在角JS，使用命名服務來封裝數據。在你的情況，我通常會定義一個Auth服務提供用於獲取和用戶設置access_token的幾種方法：

module.factory('Auth', function(){ 
    return { 
    isValid: function(){ /* Check that a User is authenticated... */ }, 
    setToken: function(token){ /* Store the token somewhere... */ }, 
    getToken: function(){ /* Fetch the token from somewhere... */ } 
    }; 
}); 

要跨「頁」共享數據 - 在您的瀏覽器標籤或窗口 - 即使在這樣的單頁面應用程序（SPA）中，也可以將數據存儲在Cookie或localStorage中。您可以使用angular-local-storage by grevory (GitHub)來抽象使用localStorage的細節，並在不兼容的瀏覽器中使用Cookie回退。

的原因，一個頁面無法看到其他定義的valid值是因爲每個頁面都有一個單獨的實例的AdminController，每個獲得自己單獨的實例的$scope依賴於各自的DOM元素。在重定向登錄頁面的$scope上設置valid對起始頁面中的完全脫離$scope實例沒有影響。

你會遇到類似的困難a trivial same-page example (CodePen)：

angular.module('scope-example', []) 
 
    .controller('ExampleCtrl', function($scope) { 
 
    $scope.value = 'Initial Value'; 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<form class="pure-form" ng-app="scope-example"> 
 
    <fieldset ng-controller="ExampleCtrl"> 
 
    First instance of <code>ExampleCtrl</code>: 
 
    <br> 
 
    <input ng-model="value"> 
 
    <label>{{value}}</label> 
 
    </fieldset> 
 
    <fieldset ng-controller="ExampleCtrl"> 
 
    Second instance of <code>ExampleCtrl</code>: 
 
    <br> 
 
    <input ng-model="value"> 
 
    <label>{{value}}</label> 
 
    </fieldset> 
 
    <fieldset ng-controller="ExampleCtrl"> 
 
    Third instance of <code>ExampleCtrl</code>: 
 
    <br> 
 
    <input ng-model="value"> 
 
    <label>{{value}}</label> 
 
    </fieldset> 
 
</form>

即使每個<fieldset>元素都有相關相同ng-controller指令，每個獲得的ExampleCtrl其自己的實例和$scope，所以value屬性之間不共享。這對任何指令都適用。