AngularJs

Question

[更新] This Plunker 做我想做的，但是 :

它使用 ui-grid，而不是 ag-grid。
它将网格注入模块，而不仅仅是使用它的单个控制器。

我认为这些更改会很简单，并且会在大约 14 小时后回到家时尝试将它们应用到我的代码中。

如果有人想分叉那个 Plunk 并进行这些更改，我会悬赏，因为对于其他想要做同样事情的人来说，这是一个很好的基本起点演示，因此 Plunker 将提供一般帮助。

我非常接近，但是

Cannot read property 'setRowData' of undefined (caused by "<ui-view class="ng-scope ng-binding">")"TypeError: Cannot read property 'setRowData' of undefined

我正在使用“controller as”语法，因此 Self； (Self = this;)。这工作正常，我的问题是当我尝试在 ui-router 状态的 templateURL 中为 ag-grid 设置 rowData 时。

它比 post 大得多，但这里是相关的东西：

<div id="currentCandidatesGridDiv"
     ag-grid="Search_result_controller.currentCandidatesGrid" 
     class="ag-theme-balham red_border"
     style="height: 30%; width:90%">
</div>

// lookup the container we want the Grid to use
const currentCandidatesGridDiv = document.querySelector('#currentCandidatesGridDiv');
// create the grid passing in the div to use together with the columns & data we want to use
new agGrid.Grid(currentCandidatesGridDiv, Self.currentCandidatesGrid);

Self.currentCandidatesGrid =
{
    columnDefs: [
       { headerName: "Candidate", field: "candidate_name", sortable: true },
       { headerName: "Skills", field: "skills", sortable: true },
       { headerName: "Start date", field: "start_date", sortable: true }
    ],
    rowData: [],  
    pagination: true,
    paginationAutoPageSize: true,
};

我 rowData: [] 是正确的，还是应该 rowData: <someVariable>？

然后我把行数据计算成一个数组，Self.currentCandidatesGridRowData。

当我尝试 Self.currentCandidatesGrid.api.setRowData(Self.currentCandidatesGridRowData); 时出现上面显示的错误。

我搜索过，但找不到使用 controller as 语法的工作 Plunker。

[Dupers] 1) "dupe" 问题没有答案，所以对我没有用
2) 我的问题特别是关于使用 Self.xxxGrid.api.setRowData(Self.xxxGridRowData); 和 `controller 作为语法。请重新开放。特纳克斯

Answer 1

使用“controller As”语法 AngularJS 的 ag-Grid 演示

加载 ag-Grid 脚本时，它不会向 AngularJS 1.x 注册。这是因为 AngularJS 1.x 是 ag-Grid 的可选部分，您需要告诉 ag-Grid 您要使用它：

agGrid.initialiseAgGridWithAngular1(angular);

angular.module("example", ["agGrid"])

有关详细信息，请参阅

Ag-Grid Documentation - Basic AngularJS 1.x Example

The DEMO on PLNKR

agGrid.initialiseAgGridWithAngular1(angular);

angular.module("example", ["agGrid"])
.controller("exampleCtrl", function() {

    var columnDefs = [
        {headerName: "Make", field: "make"},
        {headerName: "Model", field: "model"},
        {headerName: "Price", field: "price"}
    ];

    var rowData = [
        {make: "Toyota", model: "Celica", price: 35000},
        {make: "Ford", model: "Mondeo", price: 32000},
        {make: "Porsche", model: "Boxter", price: 72000}
    ];

    this.gridOptions = {
        columnDefs: columnDefs,
        rowData: rowData
    };

})

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
}
html {
    position: absolute;
    top: 0;
    left: 0;
    padding: 0;
    overflow: auto;
}
body {
    padding: 1rem;
    overflow: auto;
}

<script src="//unpkg.com/angular/angular.js"></script>
<script src='//unpkg.com/@ag-grid-community/all-modules/dist/ag-grid-community.min.js'>
</script>

<body ng-app="example" ng-controller="exampleCtrl as $ctrl"
      style="height: 100%">

    <div ag-grid="$ctrl.gridOptions" class="ag-theme-balham"
         style="height: 100%;">
    </div>

</body>

Answer 2

Was I correct to rowData: [], or ought I to have rowData: <someVariable>?

你甚至可以在gridOptions中忽略这个属性，但不同的是：如果您将 rowData 定义为空数组 - 网格会将其呈现为 'No rows to show'，但如果您不定义它，网格将显示 'Loading...' - 这是更正确的，有一个延迟的请求案例。

此外，您可以自己处理覆盖逻辑以获取更多详细信息check here。

现在，正如我在评论中所说的那样

Cannot read property 'setRowData' of undefined

此问题可能是由于使用了错误的引用引起的。

首先，查看并检查以及 ag-grid 开发人员的评论。

其次，关于一个问题本身：

.controller('yourController', [function() {
  var Self = this;  // here's your controller reference

  // then you will have columns and rowData (probably) 
  // but the most important part is here
  Self.currentCandidatesGrid = {
      ... // anything that you need
     onGridReady: gridReady // major point for future api reference
  }

  function gridReady(params){
     Self.gridApi = params.api;
     Self.columnsApi = params.columnsApi;
  }

}]);

在 gridReady 之后，您将能够通过 Self.gridApi

使用网格 API 方法

Demo

AngularJs - 使用 "controller as" 语法的 ag-grid rowData

AngularJs - ag-grid rowData using "controller as" syntax

ag-grid

使用“controller As”语法 AngularJS 的 ag-Grid 演示

The DEMO on PLNKR

现在，正如我在评论中所说的那样