Angularjs Ag-grid api在子控制器

时间:2017-08-23 18:57:12

标签: javascript angularjs ag-grid

我正在创建一个html页面,允许用户创建测试(然后存储在数据库中),并在ag-grid实例中管理它们。每个部分使用不同的控制器 - 创建位使用testManager,网格使用testUITableManager。这是html部分的要点:

<md-tab label="Create Test">
        <md-content class="md-padding">
            <div ng-controller="testManager">  
                    <div>
                <...all the field options...>
                    </div>

            <div ng-controller="testUITableManager" style="clear: both;">
                <div class="create-button">
                    <button id="TestUITable" ng-click="createTest(); loadUITableData()">Create Test</button>
                    <br>
                </div> 
           </div>   

然后,在创建部分下面是表格视图:

 <div id="TestUITable" ng-controller="testUITableManager" ng-init="loadUITableData()">

显示所有字段,并显示网格,并填充数据库的当前内容。单击“创建”按钮时会出现问题。正如您在上面的代码中看到的,我有ng-click调用两个方法,createTest()是testManager控制器和loadUITableData()的函数,它是testUITableManager控制器的函数。 createTest()调用工作正常,如果我从ng-click中删除了loadUITableData()调用,那么它会将测试添加到数据库但不刷新表。如果我添加了loadUITableData()调用,那么它会在testUITableManagerController中调用该方法,但是当它尝试加载数据时,我在行中得到一个错误:$ scope.TestUITableGrid.api.setRowData($ scope.data)因为$ scope.TestUITableGrid.api未定义。这是loadUITableData函数:

// load the data into the table
$scope.loadUITableData = function() {
    $http.get('/trm/get_test_info_from_database').success(
    function(data) {
            $scope.data = data;
            $scope.rowCount = $scope.data.length;
            $scope.TestUITableGrid.api.setRowData($scope.data);
            $scope.TestUITableGrid.api.sizeColumnsToFit();
    }); 
};

我觉得我在这里缺少一些简单的东西。如果我把表格放在一个单独的页面上并且只使用testUITableManager控制器,那么它工作正常,它似乎只是当我尝试使该控制器成为我遇到此问题的testManager控制器的子代。有谁知道我可能做错了什么?

1 个答案:

答案 0 :(得分:1)

尝试将您的函数绑定到var vm = this;而不是$scope的vm变量并使用<div ng-controller="testManager as testManger">,这样当您在ng-click上调用函数时,它看起来就像ng-click="testManager.createTest();一样for testUITableManager controller

其他解决方案是从createTest函数$rootScope.$broadcast('refreshData')广播一个事件,然后在子控制器中添加事件监听器$scope.$on('refreshData', function(){ $scope.loadUITableData() })