how to share data between two controllers in angularjs

Question

Iam trying to share the data returned by $http to another controller.

 $scope.getClickData=function(dataId){
            var postData={"containerInstanceId" : "3842a251-1708-4df0-b941-db27a03d91ab","fetchMetadata":true,"parameters":{"#{organizationTypeID}":"abf1c91f-fea8-4033-a731-136c339525c7"}};

            $http.post('http://latest.tapplent.info/api/app/layouts/v1/container-instance/data',postData).
                success(function(data, status, headers, config) {
                $scope.data=data;
console.log(data.containerData[0].propertyData.NULL[0].organizationTypeName.value);

                }).
                error(function(data, status, headers, config) {
                    console.log("error");
                });

        }
    });

app.controller('webView', ['$scope', function($scope) {

            console.log($scope.data);

    }]),

How can i get data to webview controller. Please help me friends how can i solve this problem.

Thanks in advance.

Answer 1

By Three ways.

1.) You can use Angular factory/services.

myApp.factory('unicornLauncher', ["apiToken", function(apiToken) {
  return new UnicornLauncher(apiToken);
}]);

https://docs.angularjs.org/guide/providers

2.) By use of broadcast and Emit.

You can share data via $broadcast or $Emit and then catch this data in any controller via $on.

https://docs.angularjs.org/api/ng/type/$rootScope.Scope

I prefer Angular factory/services over broadcast/emit due to performance.

3.) Or you can use $rootscope. But that is least preferred as rootscope is your global scope. You should not litter your global scope.

Answer 2

The absolutely simplest way to do this would be to write the data to the rootScope.

$rootScope = data;

A better way would be to wrap the $http call in a service with methods to perform the call and retrieve the data and inject that into both controllers.

Answer 3

Other Way That I Usually Do like Angularjs Wire up a Backend 2nd last Example

controller1.js

from controller1 just pass dataId to controller2 and controller2 will contain request code that will bring data and populate in scope.

$scope.onButtonClick = function () {
     $location.url('/controller2?dataId='+33);
    //$scope.getClickData=function(dataId){}); add this func to controller2.js
}

This Code in controller1.js will

• pass small dataId to other controller2.js

• also navigate you to other controller2.js

controller2.js

app.controller('controller2', function($scope, $location)
{
    var ID = $location.search();
    $scope.getClickData=function(ID.dataId){
         //REQUEST YOUR DATA
    });
});

Note : As we remove (request/angular promise) getClickData() function from controller1.js and add it to controller2.js .by doing this controller2 will be responsible for its own data controller2 don't have to depend on controller1 for data