Question

view.html tableUserCtrl是父控制器，ModalDemoCtrl是子控制器。现在，当用户提交表单时，我需要从userAddT调用tableUserCtrl中写的view.html函数。如果我将ModalDemoCtrl中的该功能保留在其ui-bootstrape.js中，但ModalDemoCtrl我无法使用$scope.data.push，我需要向我的{{1}添加动态原始功能所以我的问题是如何在两个控制器写入不同的js文件时从子控制器调用父控制器函数？

我在datatable中使用了$parent.userAddT，但它无效。有人能给我解决方案吗？我是AngularJS的新手。

这是我的代码：

table.js

view.html

UI-bootstrape.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()
    }       
})

view.html

.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)
          }

    })

})

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

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

1 个答案: