Home Angular1 sibling Controllers how can access each others data
Reply: 1

Angular1 sibling Controllers how can access each others data

Ganpat Kakar
1#
Ganpat Kakar Published in 2017-12-07 18:45:33Z

I am trying to get FirstCtrl data in SecondCtrl, but there is no response in SecondCtrl, Please help me to solve this

I Have tried to use $broadcast and $emit on $rootscope. but there is not data coming on $on

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script>
var myApp = angular.module('myApp', []);

myApp.controller('FirstCtrl', function( $scope,  $rootScope) {
    $scope.firstName = 'Ganpat';
    //$rootScope.$emit('firstName', $scope.firstName);
    $rootScope.$broadcast('firstName:broadcast', $scope.firstName);
});

myApp.controller('SecondCtrl', function( $scope,  $rootScope){
  $rootScope.$on('firstName:broadcast', function(event,data){
    $scope.firstName = data;
    console.log(data);
  });
});
</script>
<body>

  <div ng-app="myApp">
    <div ng-controller="FirstCtrl">
      <input type="text" ng-model="firstName">
      <br>Input is : <strong>{{firstName}}</strong>
    </div>
    <hr>
    <div ng-controller="SecondCtrl">
      Input should also be here: {{firstName}}
    </div>
  </div>
</body>
</html>
gh9
2#
gh9 Reply to 2017-12-08 19:25:16Z

Code now compiles and runs properly. You can cut and past this into fiddler and run.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script>
    var myApp = angular.module('myApp', []);

    myApp.factory('UserService', function () {
        var self = this;
        var firstName = '';
        self.SetFirstName = function (name) { firstName = name; }
        self.GetFirstName = function () { return firstName; }
        return self;
    });

    myApp.controller('FirstCtrl', ['$scope', 'UserService', function ($scope, UserService) {

        UserService.SetFirstName("coolMan");
    }]);

    myApp.controller('SecondCtrl', ['$scope', 'UserService', function ($scope, UserService) {
        $scope.firstNameTest = '';
        $scope.service = UserService;
        $scope.$watch('service.GetFirstName()', function (newVal) {
            console.log("New Data", newVal)
            $scope.firstNameTest = newVal;
        });
    }]);

</script>
<body>

    <div ng-app="myApp">
        <div ng-controller="FirstCtrl">
            <input type="text" ng-model="firstName">
            <br>
            Input is : <strong>{{firstName}}</strong>
        </div>
        <hr>
        <div ng-controller="SecondCtrl">
            Input should also be here: {{firstNameTest}}
        </div>
    </div>
</body>
</html>

EDIT

Addressing OPS comment.

I know this method will work and it will give a correct result, but i have studied the $rootscope and event $emiter and $broadcast will do this trick, so if you know about that then please tell me, thank you for your answer.

What you want to do is a bad idea. Your method forces a tighter coupling between controllers. By working on the rootscope you are forcing all controllers to rely on a certain Item being in rootscope. This is bad because controllers are not self contained modules.

By passing around a service you can decouple the controllers. Meaning that they can be used as view controllers, directive controllers, pretty much anything that requires an isolated module.

Also using a service you can now cache the result, perform centralized business logic on it, and encapsulate how you get the data. This cannot be done easily on the rootscope.

To sum it up, I will not show you a terrible way of doing what you want done. It is not good and will let other people whom look at this post use bad practices.

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.313721 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO