使用嵌套控制器時如何從視圖中調用函數-AngularJS

Question

在view.html tableUserCtrl是父控制器，而ModalDemoCtrl是子控制器。 現在我需要調用userAddT寫入功能tableUserCtrl從view.html當用戶提交表單。 當我把這個函數在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)
});

您需要將您的用戶作為close函數的參數傳遞：

$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