How do I share $scope data between states in angularjs ui-router?

How do I share $scope data between states in angularjs ui-router?

By : Abe H
Date : November 17 2020, 11:55 AM
seems to work fine I created working plunker, showing how to use $scope and UI-Router.
The state definition is unchanged:
code :
    // States
 .state("main", {
      templateUrl: "main_init.html"
  .state("main.1", {
      parent: 'main',
      templateUrl: 'form_1.html'
  .state("main.2", {
      parent: 'main',
      url: "/2",
      templateUrl: 'form_2.html'
controller('mainController', function ($scope) {
  $scope.Model = $scope.Model || {Name : "xxx"};
// So, use
<input type="text" ng-model="someObj.prop1"> 
// rather than
<input type="text" ng-model="prop1">.

Share : facebook icon twitter icon
What is the minimum needed to preserve angularjs ui-router states with sticky states from ui-router-extras?

What is the minimum needed to preserve angularjs ui-router states with sticky states from ui-router-extras?

By : DanVan
Date : March 29 2020, 07:55 AM
will be helpful for those in need I figured it out:
First of all I did not realize how the named views were actually meant to be used: With a separate view per tab. Second I did not realize that I need to hide&show the views myself.
code :
<!DOCTYPE html>
<html ng-app="plunker">

    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link href="style.css" rel="stylesheet" />
    <script data-semver="1.3.12" src="https://code.angularjs.org/1.3.12/angular.js" data-require="angular.js@1.3.x"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.13/angular-ui-router.js"></script>
    <script src="ui-router-extras.js"></script>
    <script src="app.js"></script>

    <ul class="nav nav-tabs nav-tabs-head" role="tablist">
        <li ui-sref-active="active"><a ui-sref="root.stateA" role="tab">StateA</a></li>
        <li ui-sref-active="active"><a ui-sref="root.stateB" role="tab">StateB</a></li>
    <div ui-view="" />

var log = '';

function mkController(msg) {
  return function($scope) {
    // This is the constructor of a controller
    // I'd expect this constructor to the first time a state is loaded.
    // When switching to a sister state and back it should not be called again.

    if (!$scope.random) {
      // I expect the $scope object to be retained when changing states for and
      // back. So even if my assumption that the controller will be persistent
      // would be wrong this is to check whether the $scope survives.
      // If the scope survives the random number will be initialized only once
      // and then it won't change anymore:

      $scope.random = Math.round(Math.random()*10000);
    // This log will tell us how often the controller constructor has been called
    // (Should be only once, I think)
    log += 'creating: ' + msg + '\n';
    this.message = 'Current msg: ' + msg + '\n\n' + log;
angular.module('plunker', ['ui.router', 'ct.ui.router.extras.sticky'])
.controller('ControllerA', mkController('ControllerA'))
.controller('ControllerB', mkController('ControllerB'))
.config(function($stateProvider) {
  .state('root', {
    url: '/',
    template: '<div ui-view="a" ng-show="$state.includes(\'root.stateA\')"></div><div ui-view="b"  ng-show="$state.includes(\'root.stateB\')"></div>'
  }).state('root.stateA', {
    url: '/stateA',
    views: {
      'a@root': {
        template: '<div ng-controller="ControllerA as controller"><h1>A</h1><pre>Random: {{random}}, Message (templateA): {{controller.message}}</pre></div>',
    sticky: true
  }).state('root.stateB', {
    url: '/stateB',
    views: {
      'b@root': {
        template: '<div ng-controller="ControllerB as controller"><h1>B</h1><pre>Random: {{random}}, Message (templateB): {{controller.message}}</pre></div>',
    sticky: true
.config(function($stickyStateProvider) {
.run(function ($rootScope, $state) {
  $rootScope.$state = $state;
Share $Scope data between States

Share $Scope data between States

By : pepollet
Date : March 29 2020, 07:55 AM
To fix this issue UI-Router supports data (Model) sharing among state families. The detailed explanation could be found here
How do I share $scope data between states in angularjs ui-router?
code :
// controller of the parent state 'services'
.controller('ServicesCtrl', ['$scope',
    function($scope) {
        $scope.Model = { prop1 : value1, ...};
.controller('ServiceChildCtrl', ['$scope',
    function($scope) {
        $scope.Model.prop1 = differentValue;
How do I share scope data between states in angularjs using two different ui routers?

How do I share scope data between states in angularjs using two different ui routers?

By : villek
Date : March 29 2020, 07:55 AM
will help you Use services.Services are singletons, so you can store any variables there.
code :
app.service('sessionService', function($http, settings){
    var that = this;
    this.userSessionData = null;

    this.setUserSessionData = function(sessionData) {
        that.userSessionData = sessionData;

    this.getUserSessionData = function() {
        return that.userSessionData;
How to reset data of all the states : angularJs UI router

How to reset data of all the states : angularJs UI router

By : waleed quwaider
Date : March 29 2020, 07:55 AM
this one helps. You can use $state.get() to get all the configured states and then reinitialize the data object to a desired value.
Important: child states inherit the data property from their parent states - source. In order not to break the inheritance we'll use angular.copy.
code :
angular.forEach($state.get(), function (state) {
  angular.copy({}, state.data);
How to preserve scope data when changing states with ui-router?

How to preserve scope data when changing states with ui-router?

By : user2371584
Date : March 29 2020, 07:55 AM
it should still fix some issue You need to under stand how prototypal inheritance works. When a parent puts a property value on the scope with
code :
$scope.value = 'something';
$scope.otherValue = 'something';
$scope.data = { value: 'something' };
$scope.data.otherValue = 'something';
let parent = {
  value: 'some value',
  data: { value: 'some value' }

let child = Object.create(parent);

console.log(child.value); // Finds value on the prototype chain

child.newValue = 'new value'; // Does not affect the parent


child.data.newValue = 'new value'; // newValue is visible to the parent

Related Posts Related Posts :
  • es lint '' is assigned a value but never used' eventhough i have used it
  • Can "name" attribute be used for custom VueJS components
  • Get innerHTML of content when it is clicked
  • HTTPS causes CSS animations to not load? Very confused
  • How to hide other div apart from touched div to the band
  • Is global variable assignment atomic on NodeJS?
  • Datepicker onchangemonthyear beforeshowday
  • trying to render html files using jade but it still adresses it as a jade
  • Google Analytics - Understanding and Dissecting the Snippet: What is | | [ ];
  • Replacing "[aA09.b]." to "[aA09.b]\n" in in JavaScript
  • Why wrap a function definition in an immediate function?
  • Enable / disable jQuery script on switching to different tab in a HTML page
  • how can find return variable value outside anonymous function in node js mysql query function
  • Converting 1 to 0001 in javascript array
  • svg viewbox should not resize the text fontSize?
  • store newline character with string in a variable
  • MP4 videos in Flowplayer does not play in Windows 7 Chrome
  • jquery focusin event not firing
  • How to debug Vue application with google chrome
  • html 5 web app cache download complete javascript alert?
  • Ember.js setupController fired only once
  • How to validate a currency input
  • How to convert my Array of data to key & value pair
  • Statistics circles in CSS
  • So I wanted to make a trig solver in javascript?
  • Showing HighCharts series name on x-axis and in legend
  • In Rails, how can we pass parameters in script?
  • Build Fails: `npm rebuild node-sass --force`
  • Angular Datepicker change dateformat
  • Trying to extract data from between two sets of characters
  • Configuring Jest in WebStorm
  • Uncaught Error: Syntax error, unrecognized expression: tr.ec_portfolio_title,
  • JQuery fading in fading out continuously
  • Unexpected end of input (Line 1) and Undefined Function?
  • How to animate the width of a div slowly with jquery
  • JavaScript + RegEx Complications- Searching Strings Not Containing SubString
  • SignalR - Unable to get property 'client' of undefined or null reference
  • full calendar not displaying when loaded (with backbone)
  • Angular: Update service and share data between controllers
  • ReplaceAll Google script
  • Search for matching LI items in separate UL
  • Access arguments of an... argument
  • Customizing Google custom search jsapi (query strings)
  • React | Can´t load Images > Module not found
  • Dynamically creating buttons in DOJO
  • 404 Not Found in AJAX post call
  • How do I find out, using javascript, what software opened and running my application?
  • Javascript to check the status of wireless connection
  • StarDict support for JavaScript and a Firefox OS App
  • Phonegap event Resume
  • call javascript function on ENTER key press?
  • When is the best time to remove no-js classes from the html tag
  • Recommended email sending languages
  • setInterval not working properly with chrome
  • Does IE create new scope for each script tag?
  • Uncaught SyntaxError: Unexpected token < Underscore and parse issues
  • How to pass captured URL to Email Body in HTML
  • How to structure default nested resources?
  • Store all the keys of a JSON object in a variable
  • Need an efficient way to group the Array of object in javascript
  • shadow
    Privacy Policy - Terms - Contact Us © ourworld-yourmove.org