在角度控制器中动态创建kendo-grid列

Question

我试图动态构建一个剑道角网格的结构.我的问题是,在k-options评估属性时,网格选项是未知的,因此网格绑定到数据源上的所有列.

这是HTML:

<div kendo-grid k-options="{{gridModel.options}}" 
    k-data-source="gridModel.myDataSource">
</div>

这是控制器中的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在成功方法设置之前在HTML中进行了评估,因此它基本上被忽略,并且正在呈现数据源中的所有列.

当gridModel.options静态时,这就像一个冠军.

k-options在控制器设置后,如何推迟评估和/或强制重新评估？

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>

这是更新的控制器(未显示:我$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文件中,所以我没有用太多的配置代码来污染控制器.非常高兴能想到这一点.