Question

免责声明

首先，我想说明我对Angular完全不熟悉所以我可能做错了/笨。我终于到了我不确定还有什么可以尝试的地步。

上下文

我正在处理一个项目，我需要一个可以包含嵌套或分组列的网格。该网站也在AngularJS 1.5.9中构建。网格的一个特征是能够根据用户选择隐藏或显示网格中的一组列。此外，在使用AngularJS时，我试图坚持使用指令，因为它使组件在整个应用程序中更容易使用/重用。此外，在我看来，它使代码更具可读性。

问题/疑问

目前，当用户单击模板上的切换复选框时，api对象上的gridOptions属性未定义。据我所知，documentation on ag-grid表示一旦网格绑定，该属性就应该存在。 如何在不放弃指令的情况下使其正常工作？ View the problem on Plunker

我尝试了什么

直接使用$scope
使用变量存储this参考
了解/改编来自this angular 2 example或this SO question

app.js

(function(){
  var app = angular.module('app', ['agGrid']);
  agGrid.initialiseAgGridWithAngular1(angular);

  app.directive('gridExample', function(){
    return {
      restrict: 'E',
      templateUrl:'sample-grid.html',
      controller: ['$scope', function($scope){
        // Objects
        $scope.options = {
          toggleColumn: true
        };
        // var ctrl = this;

        var rowData = [
          {col1: '1a', col2: '2a', col3: '3a'},
          {col1: '1b', col2: '2b', col3: '3b'},
          {col1: '1c', col2: '2c', col3: '3c'},
        ];

        // Methods
        $scope.loadData = function(){
          var columns = [];

          columns.push({headerName: "Col 1", field: "col1"});

          if ($scope.options.toggleColumn == true) {
            columns.push({headerName: "Col 2", field: "col2"});
          }

          columns.push({headerName: "Col 3", field: "col3"});

          $scope.gridOptions = {
            columnDefs: columns,
            rowData: rowData,
            angularCompileRows: false,
            enableColResize: true
          };
        };

        $scope.refreshGrid = function() {
          $scope.loadData();

          // HERE: I've tried this and $scope
          this.gridOptions.api.refreshView();
        };

        $scope.loadData();
      }]
    };
  });
})();

模板标记

<label>
  <input type="checkbox"
         ng-model="options.toggleColumn"
         ng-click="refreshGrid()" />
         Toggle Col 2
</label>
<div ag-grid="gridOptions" class="ag-blue" style="height: 300px;"></div>

Answer 1

这里的问题是，您第二次调用它时，会在loadData中替换初始化的$ scope.gridOptions。

快速解决方法是：

if ($scope.gridOptions) {
    $scope.gridOptions.api.setColumnDefs(columns)

} else {
    $scope.gridOptions = {
        columnDefs: columns,
        rowData: rowData,
        angularCompileRows: false,
        enableColResize: true
    };
}

这会将gridOptions设置一次，第二次只是重复使用它。

然而，更好的解决方案是设置将再次调用的方法的gridOptions 。

在这种情况下，这样的事情将是一个很好的起点：

// Objects
$scope.options = {
    toggleColumn: true
};

var rowData = [
    {col1: '1a', col2: '2a', col3: '3a'},
    {col1: '1b', col2: '2b', col3: '3b'},
    {col1: '1c', col2: '2c', col3: '3c'},
];

$scope.gridOptions = {
    rowData: rowData,
    angularCompileRows: false,
    enableColResize: true,
    onGridReady: () => {
        $scope.loadData();
    }
};

// Methods
$scope.loadData = function () {
    var columns = [];

    columns.push({headerName: "Col 1", field: "col1"});

    if ($scope.options.toggleColumn == true) {
        columns.push({headerName: "Col 2", field: "col2"});
    }

    columns.push({headerName: "Col 3", field: "col3"});

    $scope.gridOptions.api.setColumnDefs(columns)

};

$scope.refreshGrid = function () {
    $scope.loadData();
    $scope.gridOptions.api.refreshView();
};

现在我们在任何方法之外设置gridOptions，这将确保它不会在以后被覆盖。一旦网格准备就绪，我们还会使用gridReady事件来加载data（其他api可能还没有可用）

使用ag-grid，在使用angular 1.5和指令时，如何使`api`属性不为null？

1 个答案: