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

控制器被刷新＆＃39;当你改变观点。要将数据从视图/控制器保存到另一个，请将数据存储在服务。

中

<强>更新

控制器：

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

要在Angular 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... */ }
  };
});

在＆＃34;页面＆＃34;之间共享数据 - 浏览器中的标签页或窗口 - 即使在像这样的单页应用程序（SPA）中，也可以将数据存储在cookie或localStorage中。您可以使用angular-local-storage by grevory (GitHub)抽象使用localStorage在非兼容浏览器中使用Cookie回退的详细信息。

一个页面无法看到另一个页面中定义的valid值的原因是因为每个页面都获得了AdminController的单独实例，每个页面都有自己的< em> $scope的单独实例与其各自的DOM元素相关联。在重定向目标网页的valid上设置$scope对原始页面中完全分离的 $scope实例没有影响。

您在使用a trivial same-page example (CodePen)：

时会遇到类似的困难

＆＃13;

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

＆＃13;

<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>

＆＃13;

即使每个<fieldset>元素都有相同的 ng-controller指令关联，每个指针都会获得{em>自己的实例 ExampleCtrl < em>和 $scope，因此value属性不会在它们之间共享。这适用于任何指令。

使用angularJs跨页面同步变量

2 个答案: