在我的情况下如何传递变量？

Question

I am trying to decide the best practice for my controller.

I have multiple controller and I need to pass data around.

first controller

app.controller('testCtr', ['$scope','$rootScope', function($scope, $rootScope) {
    $scope.testdata = true;
}])

second controller

app.controller('secondCtr', ['$scope','$rootScope', function($scope, $rootScope) {
    var test = $rootscope.testdata;

}])

My second option is to use $parent

first controller

app.controller('testCtr', ['$scope','$rootScope', function($scope, $rootScope) {
    $scope.testdata = true;
}])

second controller

app.controller('secondCtr', ['$scope','$rootScope', function($scope, $rootScope) {
    var test = $scope.$parent.$parent.testdata;
}])

I am not sure what's the best way to do this. Anyone? Thanks!

Answer 1

You could instead notify another controller using eventing.

Example:-

app.controller('testCtr', ['$scope','$rootScope', function($scope, $rootScope) {
    $scope.testdata = true;
    $rootScope.$broadcast('DATA_UPDATED', $scope.testdata);
}]);

and receive using

app.controller('secondCtr', ['$scope','$rootScope', function($scope) {
    $scope.$on('DATA_UPDATED', function(e, data){
        testData = data;
        //do something with the data
    });
}]);

Again this completely depends upon the how the controller is arranged, and instead of passing around the data you could use a service (which are singletons) which manages the data . So one controller can just notify other controller that "I have updated now you go get it". Other controller would have injected the dependency on same service which shares and manages the data, on receiving the notification of the event it can call the service and get the updated data. Here is another good read on various services options in angular

Again use of $rootScope to $broadcast (downwards) or $emit(upwards) or just using the $scope itself to do it depends upon how the controllers are structured ($rootScope.broadcast helps resolve that, but you need to inject $rootScope which sometimes is inconvenient). But it is always better to have same implementation everywhere without worrying about how the controllers are structured, i have a pub/sub mechanism created for that, which i generally use and you can find it here . Another thing to worry when you share data between controllers are if you are passing around objects then the reference of the object is copied on the target, so any update on the target will reflect the change at source itself, some cases it is not desirable so you could angular.copy(data) the data at the source while sending it.

Also note that scopes follow prototypical inheritance pattern, ie all scopes(except isolated scope, $scope.$new(true) ) are inherited from its parent, ultimately they all are derived from the $rootScope which means a child scope can access the property set at its ancestors (via prototype chain).

Ultimately there are numerous ways to pass data, notify, share/access data between different components.

Answer 2

The best way is to use a service or factory. You can check this video from egghead.io Services are singleton objects, this means that they only have one instance. Once you make an instance of a service in a controller you can not make a new one in another, instead you will get the reference of the existing instance and so have access to the data from multiple controllers!

Look at the video, he can explain it better than I can ;)