Binding data in two respective $scope in AngularJS, how?

Question

I am trying to bring some data from $scope 1 to $scope 2. Here below, I am trying to pass "project_data.title" or "$$scope.project_data.project_title" in $scope 1 to $scope.test in $scope 2.

[$scope A]

$scope.updateData = function(project_id){
    $http.post("../crud/projects_update.php",{
        project_id : $scope.project_data.project_id,    
        project_title : $scope.project_data.project_title // this should be passed to $scope B.
    })

[$scope B]

$http.get('../crud/customers_read.php',{

}).then(function(response){
    $scope.customer = [];
    $scope.customers = response.data;
    $scope.test = { name: $scope.project_data.project_title }; // This should come from $scope A.
});

I thought they are universal, but it seems it is not. How do you usually solve this kind of problem: binding the data for different $scope?

Thank you in advance!

You should really create an $http service, and only inject it into the controllers where it's used. — Jimenemex
– Jimenemex, Commented Oct 20, 2017 at 15:19
As of angular 1.2, you should be using controller as syntax. The Angularjs team added this syntax to solve precisely these types of issues. — mhodges
– mhodges, Commented Oct 20, 2017 at 15:22

Quality Catalyst · Accepted Answer · 2017-11-10 00:43:11Z

6

Scopes in Angular can reference up the ladder to parent scopes by default unless you isolate them. It seems likely that your two scopes, if siblings, do not inherit each others' scopes by default.

For example:

scope A -> scope B : scope B can reference scope A variables

scope C <- scope A -> scope B : scope B and scope C can reference scope A variables, but scope B cannot reference scope C variables or vice versa

You can use $rootScope, but that will land you in messy scope soup state handling as your application scales.

I would suggest that you instead place the data in a service.

So scope A will publish the data to the CommonDataSvc and then scope B can reference the data there.

This will keep your state better organized.

Another option would be to implement Redux.

edited Nov 10, 2017 at 0:43

Quality Catalyst

6,8318 gold badges41 silver badges65 bronze badges

answered Oct 20, 2017 at 15:21

thomasmost

1,0802 gold badges12 silver badges37 bronze badges

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

1 Comment

James D. Over a year ago

Thank you so much for your comments! It helped me understand better. Hope this helps the others as well!

Collectives™ on Stack Overflow

Binding data in two respective $scope in AngularJS, how?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related