使用嵌套控制器时如何从视图调用函数 - AngularJS

Question

在view.html中，tableUserCtrl是父控制器，ModalDemoCtrl是子控制器。现在，当用户提交表单时，我需要从 view.html 调用 tableUserCtrl 中编写的 userAddT 函数。当我在 ModalDemoCtrl 中保持该功能在 ui-bootstrape.js 中工作但在 ModalDemoCtrl 中我不能使用 $scope.data.push 并且我需要将动态原始添加到我的 datatable所以我的问题是，当两个控制器都写在不同的 js 文件中时，如何从视图中调用子控制器的父控制器函数？

我在 view.html 中使用了 $parent.userAddT，但它不起作用。谁能给我解决方案？我是 AngularJS.

的新手

这是我的代码：

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

不要尝试从您的子作用域调用您的函数。而是添加一个函数来解决对话框的承诺：

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

您需要将您的用户作为关闭函数的参数传递：

$modalInstance.close($scope.user);

已更新

在你的控制器中tableUserCtrl添加一个方法来打开对话框并跟踪结果：

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

为您的对话框创建一个单独的视图 (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>

创建控制器addUserCtrl:

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

      $scope.modalContent = content;

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

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

删除控制器 ModalDemoCtrl 和 ModalInstanceCtrl

使用嵌套控制器时如何从视图调用函数 - AngularJS

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

html

angularjs

angular-ui-bootstrap