CODEWITHSUNDEEP
javascriptangularjs
James D.
James D.

Reputation: 117

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

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!

Upvotes: 0

Views: 51

Answers (1)

thomasmost
thomasmost

Reputation: 1070

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.

Upvotes: 6

Related Questions