Javascript 在UI网格链接中调用作用域函数_Javascript_Angularjs_Angular Ui Grid

Javascript 在UI网格链接中调用作用域函数

javascript angularjs

Javascript 在UI网格链接中调用作用域函数,javascript,angularjs,angular-ui-grid,Javascript,Angularjs,Angular Ui Grid,我正在使用UI网格制作表格。我想在单击单元格内容时调用作用域函数。在这种情况下，单击单元格时应显示警报。这是我的javascript文件 var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.exporter', 'ui.grid.selection']); app.controller('MainCtrl', ['$scope', '$http', '$interval', '$q', function ($scope

我正在使用UI网格制作表格。我想在单击单元格内容时调用作用域函数。在这种情况下，单击单元格时应显示警报。这是我的javascript文件

var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.exporter', 'ui.grid.selection']);

app.controller('MainCtrl', ['$scope', '$http', '$interval', '$q', function ($scope, $http, $interval, $q) {
    $scope.gridOptions = {};

    $scope.gridOptions.columnDefs = [{name: 'ID', field: 'id', cellTemplate: '<a ng-href="#" ng-click="test()">{{row.entity.id}}</a>'}];

    $scope.test = function() {
        window.alert("Alert");
    }

}]);

var-app=angular.module（'app'，['ngTouch'，'ui.grid'，'ui.grid.exporter'，'ui.grid.selection']）；
app.controller（'MainCtrl'、['$scope'、'$http'、'$interval'、'$q'，函数（$scope、$http、$interval、$q）{
$scope.gridOptions={}；
$scope.gridOptions.columnDefs=[{name:'ID'，field:'ID'，cellTemplate:'}]；
$scope.test=函数（）{
窗口。警报（“警报”）；
}
}]);

和我的网页：

<!doctype html>
<html ng-app="app" class="ng-scope">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular-touch.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular-animate.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
    <script src="http://ui-grid.info/release/ui-grid.js"></script>
    <script src="app.js"></script>
    <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">

    <style type="text/css">
    .grid {
        width: auto;
        height: 500px;
        margin-left: 50px;
        margin-right: 50px;
        margin-top: 50px;
        margin-bottom: 50px;
    }
    </style>

  </head>
  <body>

<div ng-controller="MainCtrl">
  <div id="grid0" ui-grid="gridOptions" ui-grid-exporter ui-grid-selection class="grid"></div>

</div>

  </body>
</html>


.电网{
宽度：自动；
高度：500px；
左边距：50像素；
右边距：50px；
边缘顶部：50px；
边缘底部：50px；
}

这不起作用，我也不知道为什么。

要从模板调用$scope级别的函数，您必须使用grid.appScope。在您的情况下，它将是

grid.appScope.test（）

cellTemplate:'

此处示例

您有一些问题<代码>$scope.gridOptions尚未初始化

cellTamplate

拼写错误。而且您没有通过执行

ui grid=“metaGridOptions”

向网格提供任何数据。所有这些都是由于不小心复制了我的代码造成的。我在这里修复了它们，但它们都没有出现在我的源代码中。

cellTemplate: '<a ng-href="#" ng-click="grid.appScope.test()">{{row.entity.Locked}}</a>'