syncing variable across pages using angularJs

Question

I have a html page with a link as follows:

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

This goes to redirect page on success where the code is

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

The control is same for both pages as follows:

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();
        }
}}

I am expecting the link to disappear once the new page opens as i am updating the valid variable value.

i know the flaw seems to be the cross page communication. so how to deal with it?

You get the tracer bullet -- console.log('found token') -- to fire, correct? Sorry, I have to ask... — AL the X
– AL the X, Commented May 12, 2016 at 20:15
yes but it appears in the console log of the redirected page — Vik
– Vik, Commented May 12, 2016 at 20:57

Andrew Donovan · Accepted Answer · 2016-05-12 21:12:42Z

1

Controllers are 'flushed' when you change views. To keep data from a view/controller to another, store your data within a Service.

UPDATE

controller:

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();
        }
    }
}

Service:

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

edited May 12, 2016 at 21:12

answered May 12, 2016 at 20:21

Andrew Donovan

5522 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Vik Over a year ago

do u have a concrete example to look at for my situation? please advise

AL the X · Accepted Answer · 2016-05-12 20:44:52Z

To share data between Controllers in Angular JS, use a named Service to encapsulate the data. In your case, I would typically define an Auth service that provides a few methods for getting and setting the access_token for a user:

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

To share data across "pages" -- tabs or windows in your browser -- even in a Single Page Application (SPA) like this, store the data in cookies or localStorage. You can use angular-local-storage by grevory (GitHub) to abstract the details of using localStorage with a cookie fall-back in non-compatible browsers.

The reason that one page cannot see the valid value defined in the other is because each page gets a separate instance of AdminController, each of which get their own separate instance of $scope tied to their respective DOM elements. Setting valid on the $scope of the redirect landing page has not effect on the completely detached $scope instance in the originating page.

You'd encounter similar difficulties with 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>

Even though each of the <fieldset> elements have identical ng-controller directives associated, each gets its own instance of ExampleCtrl and $scope, so the value property isn't shared between them. This holds true for any directive.

thanks for explaining the cause. trying to get it working without getting into cookies etc

Collectives™ on Stack Overflow

syncing variable across pages using angularJs

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related