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


    

                        
            
            


          

        
            
                Users 
            

            
                
                    
                            ...
                            
                        
                            
                                {{ w.role_no }}

Troopers · Accepted Answer

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):


    Add User

    
    ...

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

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

Answers (1)

Related Questions