Angularjs Ag-grid api在子控制器中未定义答案

【问题标题】：Angularjs Ag-grid api undefined in child controllerAngularjs Ag-grid api在子控制器中未定义
【发布时间】：2018-02-01 12:01:19
【问题描述】：

我正在创建一个 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 控制器的子节点时。有谁知道我可能做错了什么？

【问题讨论】：

标签： javascript angularjs ag-grid

【解决方案1】：

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

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

【讨论】：