ag-grid 没有填充在函数内部？

Question

如果您发现一些愚蠢的东西，我是使用 agGrid 的新手，请原谅我。所以在此之前，我在 angularjs 上使用 Kendo Grid，但我们想切换到其他网格，所以我们现在正在尝试 agGrid。

下面是一个运行良好且一切正常的 agggrid 示例。但是，当我将网格选项移动到将在按钮单击时被调用的函数中时，我收到 警告 - 未找到 ag-Grid 的网格选项。请确保属性 ag-grid 指向范围内的有效对象。

我无法理解问题出在哪里，因为在这个函数内部，剑道网格选项工作正常，剑道网格正在被填充，但我不确定我在使用 agGrid 时做错了什么。

请帮助我。

function abc($rootScope,$scope, $state, $stateParams, $timeout, Upload, baseURL, $cookieStore, $log, errorCheckFactory) {
    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}
    ];

    $scope.gridOptions2 = {
        columnDefs: columnDefs,
        rowData: rowData,
        enableFilter: true,
        enableColResize: true,
        enableSorting: true,
        groupHeaders: true,
        rowHeight: 22,
        //onModelUpdated: onModelUpdated,
        suppressRowClickSelection: true

    };

}

Answer 1

如果网格没有找到你的 gridOptions 这肯定意味着你的 html 模板中有错字

检查你必须有的 hml 模板

ag-grid="gridOptions2"

注意：如果你使用带有 controllerAs 方式的控制器，你必须在 this 而不是 $scope 上绑定变量。

如果不是这个添加，您的 html 和您的路线/状态/导航的任何定义。

Answer 2

这是角度网格绑定问题。检查您的范围变量 gridOptions。

网格选项功能：

var columnDefs = [
  {displayName: "Make", field: "make"},
  {displayName: "Model", field: "model"},
  {displayName: "Price", field: "price"},
  {displayName: "Price2 ", field: "price2"},
  {displayName: "Test 4", field: "test4"},
  {displayName: "Test 5", field: "test5"},
  {displayName: "Test 6", field: "test6"},
];

var rowData = [
  {make: "Toyota Toyota Toyota Toyota Toyota", model: "Celica", price: 35000, price2: 145, "Test 4": "Test 4", "Test 5": "Test 5", "Test 6": "Test 6"},
  {make: "Acura", model: "Celica", price: 35000, price2: 145, "Test 4": "Test 4", "Test 5": "Test 5", "Test 6": "Test 6"}
];

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

工作计划：http://plnkr.co/edit/VRnwnXi6fzyaoJJ1YHOx?p=preview

Correct binding : <div angular-grid="main.gridOptions" class="ag-fresh" style="width: 100%"></div>

错误 Plnkr : http://plnkr.co/edit/zb4Vc2lw5VzRzYwsfhL7?p=preview

In-Correct Binding : <div angular-grid="main.gridOptions2" class="ag-fresh" style="width: 100%"></div>

我们将绑定从 gridOptions 更改为 gridOptions2，它向我们发出警告：VM769 angular-grid.js:1 WARNING - Angular Grid 的网格选项未找到。请确保属性 angular-grid 指向范围内的有效对象。

我认为这应该可以消除疑虑。

Answer 3

@ranjeet8082 你可以打开网格在点击按钮的时候，你可以在函数旁边写“gridOptions”。因此，您也可以在那时使用 ng-if 首先加载 Html，您可以隐藏 html 点击，只有您可以加载 html，然后在选项中也加载点击功能，这样您就不会收到任何错误。你可以和这个 plunker 核对一下。

<div ng-if="vm.gridOptions"  angular-grid="vm.gridOptions" class="ag-fresh" style="width: 100%"></div>

link