我正在尝试动态构建剑道 Angular 网格的结构。我的问题是当评估 k-options
属性时网格选项是未知的,因此网格绑定(bind)到数据源上的所有列。
这是 HTML:
<div kendo-grid k-options="{{gridModel.options}}"
k-data-source="gridModel.myDataSource">
</div>
这是 Controller 中的 javascript:
// this is called after the api call has successfully returned with data
function getSucceeded(){
...
$scope.gridModel.options = function(){
// function that properly builds options object with columns, etc.
}
// this is just shown for example... the data is properly loading
$scope.gridModel.myDataSource.data(ds.data());
}
数据已正确加载,但由于 gridModel.options
在 success 方法设置之前在 HTML 中进行了评估,因此它基本上被忽略并且正在呈现数据源中的所有列.
当 gridModel.options
是静态的时候,这就像一个冠军。
我如何推迟对 k-options
的评估和/或在它们被 Controller 设置后强制重新评估?
最佳答案
我想通了。我必须做四件事:
- 更新我的 angularjs 版本(我使用的是 1.08,它没有
ng-if
指令)。我更新到 1.2.0rc3。 - 将我的
kendo-grid
div
包裹在ng-if
div
中 - 调用我的函数!我只是将
$scope.gridModel.options
设置为 一个函数 - 我需要实际调用该函数,所以我将变量设置为返回的值 来自函数。 - 我必须更新我的
angular.module
声明以包含ngRoute
(基于它在 1.2.x 中被分离到它自己的模块中)。
这是更新后的 HTML:
<div data-ng-if="contentAvailable">
<div kendo-grid k-options="{{gridModel.options}}"
k-data-source="gridModel.myDataSource">
</div>
</div>
这是更新后的 Controller (未显示:我在 Controller 的开头设置了 $scope.contentAvailable=false;
):
// this is called after the api call has successfully returned with data
function getSucceeded(){
...
$scope.gridModel.options = function(){
// function that dynamically builds options object with columns, etc.
}(); // <----- NEED to invoke function!!
// this is just shown for example... the data is properly loading
$scope.gridModel.myDataSource.data(ds.data());
$scope.contentAvailable=true; // trigger the ng-if
}
我实际上将该函数移到了 config
文件中,这样我就不会用过多的配置代码污染 Controller 。很高兴能解决这个问题。
关于javascript - 在 Angular Controller 中动态创建剑道网格列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19363973/