AngularJs - How to use method of one controller in multiple controllers?

Question

I am bit new to AngularJS.

Here is my code:

table.js

.controller('ModalDemoCtrl', function ($scope, $rootScope, $uibModal, $log, tableService) {

    $rootScope.$on("openRootDialog", function(event, html){
        $scope.openDialog(html);
    });

    $scope.openDialog = function (html) {
        // TODO: replace option dialog with your options:
        var modalInstance = $uibModal.open({
            animation: true,
            templateUrl: html + '.html',
            controller: 'ModalInstanceCtrl',
            size: 'md',
            backdrop: 'static',
            keyboard: true,
            resolve: {
                content: function () {
                    return $scope.modalContent;
                }
            }            
        });

        modalInstance.result.then(function (result) {
            // Add user in you database
            tableService.addUserData(result);
            // Add user in your view
            $scope.data.push(result)
            $scope.tableEdit.reload();
        });
    }       
})

.controller('ModalInstanceCtrl', function ($scope, $modalInstance, content) {

      $scope.modalContent = content;

      $scope.ok = function () {
        $modalInstance.close($scope.user);
      };

      $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
      };
})

//user
.controller('tableUserCtrl', function($scope, $rootScope, $uibModal, $log, $filter, $sce, ngTableParams, tableService) {
    //var data = tableService.data;

    var selfUser = this; 
    $scope.data = [];
    //selfUser.obj = null;
    var promise = tableService.getUserData();

    promise.then(
        function(payload) { 

            $scope.data = payload.data;

            $scope.tableEdit = new ngTableParams({
                page: 1,            // show first page
                count: 10,           // count per page  
                sorting: {
                    name: 'asc'     // initial sorting
                }                   
            }, {
                total: $scope.data.length, // length of data
                getData: function($defer, params) {
                    //$defer.resolve(selfUser.data.slice((params.page() - 1) * params.count(), params.page() * params.count()));

                    //sorting                       
                    var orderedData = params.sorting() ? $filter('orderBy')($scope.data, params.orderBy()) : $scope.data;

                    //filtering
                    orderedData = params.filter() ? $filter('filter')(orderedData, params.filter()) : orderedData;

                    //orderedData = orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count());

                    //params.total(orderedData.length);
                    //$defer.resolve(orderedData);
                    $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));

                }
            });                 
        },
        function(errorPayload) {
          $log.error('failure loading movie', errorPayload);
        }); 

    //to update data    
    $scope.updateUser = function(w) {
        tableService.updateUserData(w);
    }       

    $scope.removeUser = function(id, w) {
        tableService.removeUserData(id)
        //alert(JSON.stringify($scope.data))
        $scope.data.splice($scope.data.indexOf(w), 1);
        $scope.tableEdit.reload();
        //alert(JSON.stringify($scope.data))
    }

    $scope.openUserDialog = function(html) {
        $rootScope.$emit("openRootDialog", {});
    }

})

view.html

<div class="container" data-ng-controller="tableUserCtrl">

    <!--<div class="p-t-0" data-ng-controller="ModalDemoCtrl"> -->               
        <script type="text/ng-template" id="adduser.html">
            <div class="modal-header">
                <!--<h4 class="modal-title">Add User</h4>-->
            </div>
            <form role="form" ng-submit="insertInfo(userInfo);" name="userForm" novalidate>
                <div class="modal-body m-l-15">
                    <div class="row">
                        <div class="form-group fg-float m-b-30">
                            <div class="fg-line">
                                <input type="text" class="input-sm form-control fg-input" name="name" ng-model="user.name" required="">
                                <label class="fg-label">Name</label>
                            </div>
                            <div ng-show="userForm.$submitted || userForm.name.$touched">
                                <div ng-show="userForm.name.$error.required" class="error">This field is required.</div>
                            </div>
                        </div>
                        ...
                    </div>                  
                </div>
                <div class="modal-footer">
                    <button class="btn btn-link" ng-click="ok(user);" ng-disabled="userForm.$invalid">Submit</button>
                    <button class="btn btn-link" ng-click="cancel()">Cancel</button>
                </div>
            </form>
        </script>
        <button class="btn btn-default pull-right" ng-click="openUserDialog('adduser')">Add User</button><br/><br/>
    <!--</div>-->

    <div class="card">
        <div class="card-header">
            <h2>Users <small></small></h2>
        </div>

        <div class="card-body">
            <div class="table-responsive">
                <table ng-table="tableEdit" class="table table-striped table-vmiddle" show-filter="true">
                    <tr ng-repeat="w in $data"  ng-class="{ 'active': w.$edit }">
                        <td data-title="'Name'" filter="{ 'name': 'text' }" sortable="'name'">
                            <span ng-if="!w.$edit">{{ w.name }}</span>
                            <div ng-if="w.$edit"><input class="form-control" type="text" ng-model="w.name" /></div>
                        </td>
                        ...
                        <td data-title="'Actions'">
                            <button type="button" class="btn btn-default" ng-if="!w.$edit" ng-click="w.$edit = true"><i class="zmdi zmdi-edit"></i></button>
                            <button type="button" class="btn btn-default" ng-if="!w.$edit" ng-click="removeUser(w.user_id, w)"><i class="zmdi zmdi-close"></i></button>
                            <button type="button" class="btn btn-success" ng-if="w.$edit" ng-click="w.$edit = false; updateUser(w)"><i class="zmdi zmdi-check"></i></button>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</div>

I am passing html template name in openUserDialog function from view as I need to use that name in openDialog function written in ModalDemoCtrl so I can use dynamic templates in modal.

I have searched a lot but couldn't get exact things that how can I pass args to openRootDialog from openUserDialogfunction written in tableUserCtrl?

can anyone please help me? is there any syntax issue? I don't have any idea about $emit, $on etc. as am using it first time.

Answer 1

Use $rootscope,

this is example:

app.run(function($rootScope) { 

    $rootScope.someMethod=function(){
      //do staff
    }
}

in another controller just use $scope.someMethod(), in view someMethod().

it is global method now.