javascript - 在 Angular Controller 中动态创建剑道网格列

Question

我正在尝试动态构建剑道 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 设置后强制重新评估？

Answer 1

我想通了。我必须做四件事:

1. 更新我的 angularjs 版本(我使用的是 1.08，它没有 ng-if 指令)。我更新到 1.2.0rc3。
2. 将我的 kendo-grid div 包裹在 ng-if div 中
3. 调用我的函数!我只是将 $scope.gridModel.options 设置为 一个函数 - 我需要实际调用该函数，所以我将变量设置为返回的值 来自函数。
4. 我必须更新我的 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 。很高兴能解决这个问题。