AngularJS 1.4.4：ng-click 在网格中不起作用

Question

我在 angularJS 1.4.4 中构建了一个简单的 Web UI。我陷入了 UI 网格中单击事件的基本问题。单击网格中的眼睛按钮和文件按钮时，不会调用控制器中定义的 successnotification() 函数。而对于刷新按钮，按钮单击工作正常。下面是我的 HTML 和 Controller

的代码

class AccesspointListController {
  /*@ngInject*/
  /* Read me documentation for Grid : http://www.ag-grid.com/documentation.php */
  constructor($rootScope, GridFilters,AccesspointListService, SnapshotController) {
    this.name = 'accesspointlist';

    Object.assign(this, {$rootScope, GridFilters,AccesspointListService, SnapshotController});

    this.columnDefs = [
        {
            headerName: "Sr No.",
            //field: "accessPointDetailsId",
            field: "no",
            width:15,
            filter: 'number', 
            filterParams: { apply: true },
            cellStyle:{'text-align': 'center'},
            unSortIcon:true
        },    
        {
            headerName: "IP",
            //field: "accessPointIP",
             field: "ip",
            filter:'text',
            width:80,
            unSortIcon:true
        },
        {
            headerName: "Actions",
            field: "", 
            width:35,
            suppressSorting: true, 
            suppressMenu:true,
            cellRenderer: function(params) {
                return '<button class="btn primary" ng-click="grid.appScope.successnotification(row)"><i class="fa fa-eye"></i></button>'+
                '<button class="btn primary" ng-click="grid.appScope.vm.successnotification(row)"><i class="fa fa-file-image-o"></i></button>';
            }
        }
    ];
this.allOfTheData = require("json!./favCFIC.json")['items'];
    this.pageSize = '10';
    this.gridOptions = {
        columnDefs: this.columnDefs,
        //rowData: $scope.allOfTheData,//Load data here for static non paging data.
        groupHeaders: false,
        enableColResize: false,
        enableSorting: true,
        suppressRowClickSelection: true,
        headerHeight:40,
        rowHeight:40,
        angularCompileHeaders: true,
        angularCompileFilters: true,
        enableFilter: true,
        icons: {
            // use font awesome for menu icons
            sortAscending: '<i class="fa fa-sort-amount-asc"/>',
            sortDescending: '<i class="fa fa-sort-amount-desc"/>'
        }
    };

  }//end constructor

loadData() {
            let allOfTheData = this.allOfTheData;
                if(allOfTheData.length==0) {
                    $rootScope.alerts.push({
                        type: 'danger',
                        msg: 'There is an issue building the data table.',
                        targetState: 'forms'
                    });
                } else {
                    let dataSource = {
                        rowCount: (this.allOfTheData.length),
                        pageSize: parseInt(this.pageSize), // changing to number, as scope keeps it as a string
                        getRows: function (params) {
                            // this code should contact the server for rows. however for the purposes of the demo,
                            // the data is generated locally, a timer is used to give the experience of
                            // an asynchronous call
                            setTimeout(function() {
                                // take a chunk of the array, matching the start and finish times
                                let rowsThisPage = allOfTheData.slice(params.startRow, params.endRow);
                                // see if we have come to the last page. if we have, set lastRow to
                                // the very last row of the last page. if you are getting data from
                                // a server, lastRow could be returned separately if the lastRow
                                // is not in the current page.
                                let lastRow = -1;
                                if (allOfTheData.length <= params.endRow) {
                                    lastRow = allOfTheData.length;
                                }
                                params.successCallback(rowsThisPage, lastRow);
                            }, 500);
                        }
                    };
                    this.gridOptions.api.setDatasource(dataSource);
                    this.gridOptions.api.sizeColumnsToFit()

    }

successnotification(){
        this.notf1.show('Success! You\'ve clicked the Add button.', "success");
        };
}

export default AccesspointListController;

这是我的 html 文件。

<section class="container">
    <div class="col-md-10 cf">
    <div ncy-breadcrumb></div>

    <br />
<div id="notificationSpot">
</div>
<br />
<br class="cf"/>
    <div class="col-sm-8">
<div class="panel panel-default" id="content-formatting">
    <div class="panel-heading" align="right">
        <label id="lastUpdated">Last Updated : </label>
        <label id="lastUpdatedValue">19/2/2018 12:20 AM </label>
        &nbsp;&nbsp;
        <button type="button" class="btn 0" ng-click="vm.redirect()"><i class="fa fa-refresh"></i></button>
    </div>
    <div ag-grid="vm.gridOptions" class="ag-fresh" style="clear:both; height: 430px; width:100%;" ng-init="vm.loadData()"></div>

</div>
    </div>
<span kendo-notification="vm.notf1" k-position="{ top: 110}" ></span>
<span kendo-notification="vm.notf2" k-append-to="'#notificationSpot'" k-auto-hide-after="0"></span>
    </div>
</section>

Answer 1

解决方案：按照以下代码片段修改单元格渲染器代码

 cellRenderer: function(params) {
                   return $compile('<a href="" class="btn primary" ng-click="vm.successnotification()"><i class="fa fa-eye"></i></a>')($scope)[0];
                }

Answer 2

您可以在ag-grid中定义和注册回调(onSelectionChanged):

var gridOptions = {
    columnDefs: columnDefs,
    suppressRowClickSelection: false, // Important! allow to select the rows
    rowSelection: 'single', // option, if you need only one row selected
    onSelectionChanged: onSelectionChanged  // callback
};

每次更改 ag-grid 的选择时都会触发此回调。您可以定义回调：

function onSelectionChanged() {
    var selectedRows = gridOptions.api.getSelectedRows();
    var selectedRowsString = '';
    selectedRows.forEach( function(selectedRow, index) {
        if (index!==0) {
            selectedRowsString += ', ';
        }
        selectedRowsString += selectedRow.athlete;
    });
    document.querySelector('#selectedRows').innerHTML = selectedRowsString;
}

信息摘自官方文档： Link to documentation

AngularJS 1.4.4：ng-click 在网格中不起作用

AngularJS 1.4.4: ng-click not working in grid

angularjs

angular-grid