So rufen Sie die Funktion in einer Ansicht auf, wenn verschachtelte Controller verwendet werden: AngularJS

Question

In view.html ist tableUserCtrl der übergeordnete Controller und ModalDemoCtrl ist der untergeordnete Controller. Jetzt muss ich userAddT Funktion in tableUserCtrl von view.html geschrieben, wenn Benutzer das Formular absenden. Wenn ich diese Funktion in ModalDemoCtrl in ui-bootstrape.js seine Arbeit aber in ModalDemoCtrl ich kann nicht $scope.data.push verwenden, und ich brauche dynamische rohe zu meinem datatable so meine Frage ist, wie übergeordneten Controller-Funktion aus Kind Controller aus Sicht aufrufen, wenn beide Controller geschrieben werden in verschiedenen js-Dateien?

Ich habe $parent.userAddT in view.html verwendet, aber es funktioniert nicht. Kann mir jemand die Lösung geben? Ich bin neu in AngularJS.

Hier ist mein 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> 

Answer 1

Versuchen Sie nicht, Rufen Sie Ihre Funktion von Ihrem Kindbereich ab. hinzufügen Anstatt eine Funktion, das Versprechen des Dialogs zu lösen:

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

Sie benötigen Benutzer als Parameter der Nähe Funktion zu übergeben:

$modalInstance.close($scope.user); 

Aktualisiert

In Ihrem Controller tableUserCtrl fügen Sie eine Methode hinzu, um das Dialogfeld zu öffnen und das Ergebnis zu verfolgen:

$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); 
    }; 
}); 

erstellen getrennt Ansicht für Ihren 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> 

einen Controller addUserCtrl erstellen:

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

     $scope.modalContent = content; 

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

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

den Controller ModalDemoCtrl und ModalInstanceCtrl