【问题标题】：insert ng-click event into ng-grid将 ng-click 事件插入 ng-grid
【发布时间】：2016-06-09 15:23:16
【问题描述】：

我想做一些我不知道是否可行的事情

HTML

<!DOCTYPE html>
    <html ng-app="myApp">
    <head lang="en">
        <meta charset="utf-8">
        <title>Custom Plunker</title>  
        <link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />
        <link rel="stylesheet" type="text/css" href="style.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
        <script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>
        <script type="text/javascript" src="main.js"></script>
    </head>
    <body ng-controller="MyCtrl">
        <div class="gridStyle" ng-grid="gridOptions"></div>
    </body>
 </html>

JS

// main.js
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
    $scope.myData = [{name: "Moroni", age: 50},
                     {name: "Tiancum", age: 43},
                     {name: "Jacob", age: 27},
                     {name: "Nephi", age: 29},
                     {name: "Enos", age: 34}];
    $scope.gridOptions = { data: 'myData',
                         cellTemplate:'<div class="ngCellText" ><a ng-click="foo()">{{row.getProperty(col.field)}}</a></div>' 
    }
    $scope.foo = function() {  

        alert('');
    };
});

我想在 ng-grid 中的一行上放置一个 ng-click 事件，我有这个想法环顾四周，但我真的不明白这是否可能，如果是这样，如果是这样的话这样做的正确方法。在这段代码中，这对我来说似乎很好，应用程序没有启动警报，有什么建议或想法吗？

这里是 plunker http://plnkr.co/edit/U6wdWTAV30HRhJk8xFPA?p=preview

【问题讨论】：

谢谢，但它不起作用你知道为什么吗？你试过 plunker 吗？
这是对这个问题的一个非常晚的答案，但我正在处理同样的问题。 @mainguy 在答案中给出的示例并没有真正解决输入控件上的单击事件的问题。这是一个工作示例。 hth。 plnkr.co/edit/6IWa29ewYywLI1ghPgxe?p=preview

标签： angularjs events angular-ui ng-grid angularjs-ng-click

【解决方案1】：

他们 github 网站上的文档确实很旧。

这里是这个问题的正确页面的链接。 http://ui-grid.info/docs/#/tutorial/305_appScope

        yourCtrl.gridOptions = {
            enableFiltering: true,
            enableHiding : false,
            enableSorting: true,
            appScopeProvider : yourCtrl,
            rowTemplate: '<div ng-click="grid.appScope.doSomething(row)" ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.uid" class="ui-grid-cell" ng-class="col.colIndex()" ui-grid-cell></div>',
        };

        yourCtrl.doSomething = function(row) {
            alert("lala");
        }

是的，不知何故

ng-click="grid.appScope.doSomething"

不会工作

【讨论】：

【解决方案2】：

这些定义对我有用：

  $scope.gridOptions = {
    data: 'myData',
    columnDefs: [{
        field: 'name',
        displayName: 'Name',
        cellTemplate: '<div  ng-click="foo()" ng-bind="row.getProperty(col.field)"></div>'
      }, {
        field: 'age',
        displayName: 'Age',
        cellTemplate: '<div  ng-click="foo()" ng-bind="row.getProperty(col.field)"></div>'
      }

    ]
  };

查看你的分叉 Plunker here

【讨论】：

正确答案是使用grid.appScope，解释如下：stackoverflow.com/a/33792526/492130
是的，我知道。但是这个问题是关于 ng-grid 而不是 ui-grid。无论如何感谢您指出这一点。
对！感谢您更新此内容。我忘了提到ng-grid 已被弃用，取而代之的是ui-grid。所以如果你可以移动到ui-grid，你应该移动并且你应该使用grid.appScope。
但是当你想移动但你不能移动时会发生什么？安德森先生？ :-)
辞掉你的工作，律师，去健身房！

【解决方案3】：

$scope.ShowDetails=function(_obj)
{
   alert('Hi! ' + _obj);
}

$scope.gridOptions = {
    columnDefs: [
      { name: 'Search', field: 'Col1', cellTemplate: '<div ng-click="grid.appScope.ShowDetails(row)"><img src="/images/search.png" /></div>' },
      { name: 'Col2', displayName: 'Col2' },
    ]};

这是将事件附加到 ui 网格单元格的示例。

【讨论】：