How to call function from a view when using nested controllers - AngularJS

Question

In view.html tableUserCtrl is parent controller and ModalDemoCtrl is child controller. Now I need to call userAddT function written in tableUserCtrl from view.html when user submit the form. When I keep that function in ModalDemoCtrl in ui-bootstrape.js its working but in ModalDemoCtrl I can't use $scope.data.push and I need to add dynamic raw to my datatable so my question is how to call parent controller function from child controller from view when both controller are written in different js files?

I have used $parent.userAddT in view.html but it's not working. Can anyone give me the solution? I am new to AngularJS.

Here is my code:

table.js

//user
.controller('tableUserCtrl', function($scope, $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.addUserT = function(w) {
        alert("hey")
        tableService.addUserData(w)
        //$scop.data.push()
        //$scope.tableEdit.reload()
    }       
})

ui-bootstrape.js

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

    $scope.modalContent = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sodales orci ante, sed ornare eros vestibulum ut. Ut accumsan vitae eros sit amet tristique. Nullam scelerisque nunc enim, non dignissim nibh faucibus ullamcorper. Fusce pulvinar libero vel ligula iaculis ullamcorper. Integer dapibus, mi ac tempor varius, purus nibh mattis erat, vitae porta nunc nisi non tellus. Vivamus mollis ante non massa egestas fringilla. Vestibulum egestas consectetur nunc at ultricies. Morbi quis consectetur nunc.';

    //Create Modal
    function modalInstances(animation, size, backdrop, keyboard, htmlurl) {
        var modalInstance = $uibModal.open({
            animation: animation,
            templateUrl: htmlurl + '.html',
            controller: 'ModalInstanceCtrl',
            size: size,
            backdrop: backdrop,
            keyboard: keyboard,
            resolve: {
                content: function () {
                    return $scope.modalContent;
                }
            }            
        });
    }

    //Prevent Outside Click
    $scope.openStatic = function (htmlurl) {
        modalInstances(true, '', 'static', true , htmlurl)
    };

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

          $scope.modalContent = content;

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

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

          $scope.addUser = function(w) {
            tableService.addUserData(w)
          }

    })

})

view.html

<section id="content">
    <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-footer">
                        <button class="btn btn-link" ng-click="ok(); $parent.addUserT(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="openStatic('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="'ID'" filter="{ 'role_no': 'text' }" sortable="'role_no'">
                                <span ng-if="!w.$edit">{{ w.role_no }}</span>
                                <div ng-if="w.$edit"><input class="form-control" type="text" ng-model="w.role_no" /></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>
</section>

Troopers · Accepted Answer · 2016-12-20 14:12:12Z

1

Don't try to call your function from your child scope. Instead add a function to resolve the promise of the dialog :

var modalInstance = $uibModal.open(
    ...
);
modalInstance.result.then(function (result) {
    tableService.addUserData(result)
});

You need to pass your user as parameter of the close function :

$modalInstance.close($scope.user);

Updated

In your controller tableUserCtrl add a method to open the dialog and track result:

$scope.openDialog = function () {
    // TODO: replace option dialog with your options:
    var modalInstance = $uibModal.open({
        animation: true,
        templateUrl: viewsPath + 'addUserView.html',
        controller: 'addUserCtrl',
        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);
    };
});

Create a separated view for your dialog (adduserView.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-footer">
        <button class="btn btn-link" ng-click="ok();" ng-disabled="userForm.$invalid">Submit</button>
        <button class="btn btn-link" ng-click="cancel()">Cancel</button>
    </div>
    </form>

Create a controller addUserCtrl:

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

      $scope.modalContent = content;

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

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

Remove the controllers ModalDemoCtrl and ModalInstanceCtrl

edited Dec 20, 2016 at 14:12

answered Dec 20, 2016 at 8:51

Troopers

5,4824 gold badges44 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

DD77 Over a year ago

Okay! I got it but that's just alternate way of calling function from ModalDemoCtrl.

DD77 Over a year ago

My issue is that I have to use $scope.data.push to add raw to my datatable. So how can I use it in ModalDemoCtrl?

Troopers Over a year ago

add a function openModal in your tableUserCtrl to call var modalInstance = $uibModal.open({..}); and modalInstance.result.then(...) add your data.push in the promise result and remove the unused ModalDemoCtrl. Keep only ModalInstanceCtrl

DD77 Over a year ago

I am not getting what you trying to say. I don't have much knowledge about AngularJS. Will you please add some code where I need to change?

Collectives™ on Stack Overflow

How to call function from a view when using nested controllers - AngularJS

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related