同步使用跨页变量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属性之间不共享。这对任何指令都适用。