Angularjs: modify scope in js and use later in page

Question

If there's something out there I'd love to see some documentation on something like this.

I'm trying to add a value from the query string to the scope of my controller and use that value in another function down the page.

This is what I've tried:

var id = Number(getQueryStringValue("id"));
if (!!id) {
    $('[ng-controller="appControl"]').scope().id = id;
}

To set the value in scope and:

<p>
    id: {{id}}
</p>

down the page to print out the id. If I do something like this:

var x = $('[ng-controller="appControl"]').scope();

I can see that id has indeed been added to the scope but then the only output I get is id:. I can also see that the id is in fact a number and not a string or some other value that would not print.

--Edit--

Since it seems that this is not the best way to do this, I've looked into factories, the following is my code (which still doesn't work for some reason) and is contained in a separate file:

var app = angular.module('app', []);

app.controller('appctrl', function ($scope) {
  $scope.dataArr= [
    {'name': 'Yo'},
    {'name': 'Dawg'}
  ];
});

app.factory('Data', function () {
    var idValue = 0;
    return {
        setId: function (id) {
            idValue = id;
        },
        getId: function () {
            return idValue;
        }
    }
});

This is the script on the page in question:

<script type="text/javascript">
$(function () {
    var id = Number(getQueryStringValue("id"));
    if (!!id) {
        app.controller('appctrl', function($scope, Data) {
            $scope.id = Data.setId(id);
                });
    }
});
</script>
<div ng-app="app">
    <div ng-controller="appctrl">
        {{id}}
    </div>
</div>

What about `$rootScope` ? – Anik Islam Abhi Apr 05 '15 at 08:20 — Anik Islam Abhi, Apr 05 '15 at 08:20

score 0 · Answer 1 · edited May 23 '17 at 11:56

0

Try to call $scope.$apply() in the appControl controller after an assignment of the new id value.

Please, see and investigate this article.

But, it's a really bad approach to share data between controllers in AngularJS. Better way is described here and here.

edited May 23 '17 at 11:56

Community

1
1

answered Apr 05 '15 at 08:14

Artyom Pranovich

6,814
8
41
60

score 0 · Answer 2 · answered Apr 05 '15 at 08:16

So you're using jQuery to modify your scope?

That sounds like a really, really bad idea.

Try to solve everything within your primary framework and only resort to other methods if a problem really can't be solved in it.

You didn't mention what problem you're trying to solve, but right now, I have no reason to think it can't be solved within AngularJS.

Look into $rootscope if you want to be able to set scope variables inside the controller and to be able to access them outside of the controller.

Michael Kang · Answer 3 · 2015-04-06T22:01:45.483

0

The proper way to share data between unrelated scopes is through a service or factory:

app.factory('Data', function() {
    var idValue = 0;
    return  {
        setId: function(id) {
            idValue = id;
        },
        getId: function() {
            return idValue;
        }
    }
});

Then, in any controller, you can inject the Data service:

app.controller('ctrl1', function($scope, Data) {
     Data.setId(10); 
     $scope.id = Data.getId();
});

app.controller('ctrl2', function($scope, Data) {
     $scope.id = Data.getId(); 
});

var app = angular.module('app', []);
app.factory('Data', function() {
  var idValue = 0; 
  return  {
    setId: function(id) {
      idValue = id;
    },
    getId: function() {
      return idValue;
    }
  }
 });

app.controller('ctrl1', function($scope, Data) {
  Data.setId(10);
  $scope.id = Data.getId();
});

app.controller('ctrl2', function($scope, Data) {
   $scope.id = Data.getId(); 
});

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    <div ng-app="app">
      
      <div ng-controller="ctrl1">
        ctrl1: {{ id }}
      </div>
      
      <div ng-controller="ctrl2">
        ctrl2: {{id}}
      </div>
      
    </div>

edited Apr 06 '15 at 22:01

answered Apr 05 '15 at 08:19

Michael Kang

52,003
16
103
135

So how would I use this later in down the page? Should `{{Data.getId()}}` work? – dlkulp Apr 06 '15 at 21:11
Because you've injected the service in your second controller, and assigned it to $scope.id, all you have to do is {{ id }} – Michael Kang Apr 06 '15 at 21:22
um, maybe I'm missing something but that doesn't work. I don't get any output at all. I copied and pasted what you have, the initial controller setup and factory are defined in a separate file and on the page I'm using what you have (the only difference being `Data.setId(myVar)` but the page is blank! – dlkulp Apr 06 '15 at 21:47
is it a problem to have the initial controller setup and the scope modifying controller (instances of the same one) in different files? – dlkulp Apr 06 '15 at 23:24
No, should not be a problem – Michael Kang Apr 07 '15 at 01:30
I've updated the question but it's still not working at all. I'm very confused! – dlkulp Apr 08 '15 at 06:50

score 0 · Accepted Answer · answered Apr 05 '15 at 09:15

0

@artyom already gave you a hint. You need to call $apply() function after setting the id right after the code, like below:

var id = Number(getQueryStringValue("id"));
if (!!id) {
    $('[ng-controller="appControl"]').scope().id = id;
    $('[ng-controller="appControl"]').scope().$apply();
}

answered Apr 05 '15 at 09:15

Shashank Agrawal

25,161
11
89
121

Thumbs up for functional code example. I don't understand if this is any better or worse than using a factory but considering that I'm only ever working in one scope this works great! – dlkulp Apr 08 '15 at 21:10

Angularjs: modify scope in js and use later in page

4 Answers4