Angular JS ui-grid cellTemplate 的 ng-click 在范围函数尝试将单元格信息作为参数传递时未触发

Question

我似乎无法让 ng-click 为我触发，我已经尝试了几个小时。我在 SO 上阅读了很多类似的问题，但 none 似乎解决了我的问题。请注意，如果我将 ng-click 更改为 onclick 事件会触发。

我的 JS：

var app = angular.module('app', ['ngTouch', 'ngAnimate', 'ui.grid', 'ui.grid.moveColumns', 'ui.grid.resizeColumns']);

app.controller('matterController', ['$scope', '$http', 'uiGridConstants', function ($scope, $http, uiGridConstants) {

    var industryFields,
        departmentFields,
        regionFields;

    $scope.gridOptions = {
        enableFiltering: true,
        enableColumnResizing: true,
        enableSorting: true,
        columnDefs: [
            { name: 'Client_Name', width: 120, enableHiding: false },
            { name: 'Client_Number', width: 140, enableHiding: false },
            { name: 'Matter_Name', width: 130, enableHiding: false },
            { name: 'Matter_Number', width: 140, enableHiding: false },
            { name: 'Billing_Partner', width: 250, enableHiding: false },
            { name: 'Matter_Descriptions', width: 180, enableHiding: false
, cellTemplate: '<div class="ui-grid-cell-contents"><a ng-href="#" ng-click="displayDescription(\'{{COL_FIELD}}\');">View Description</a></div>' },
            { name: 'Industries', width: 120, enableHiding: false },
            { name: 'Departments', width: 130, enableHiding: false },
            { name: 'Regions', width: 120, enableHiding: false }
        ],
        showGroupPanel: true
    };

    function loadData() {
        $http.get('api/ClientMatter/')
        .success(function (data) {
            $scope.gridOptions.data = data;
        });

        $http.get('Home/GetIndustries')
        .success(function (data) {
            industryFields = data;
        });

        $http.get('Home/GetDepartments')
        .success(function (data) {
            departmentFields = data;
        });

        $http.get('Home/GetRegions')
        .success(function (data) {
            regionFields = data;
        });
    }

    $scope.displayDescription = function(data) {
        alert(data);
    }

    loadData();
}]);

"Matter_Descriptions" 列有一个自定义单元格模板，需要调用 "displayDescription" 方法。到目前为止，我根本无法让它开火。

我的HTML:

<div class="screen-container" ng-controller="matterController">
    <button onclick="location.href = '@Url.Action("Create", "Home")'; return false;" style="float: right;">New Matter</button>
    <br/><br/>
    <div id="home-grid" ui-grid="gridOptions" class="grid" ui-grid-move-columns ui-grid-resize-columns></div>
</div>

这里是运行时超链接的屏幕截图，显示了我想要的数据：

很基础。任何帮助表示赞赏！谢谢！

Answer 1

由于这个 post，我找到了解决方案：Button click does not work in Celltemplate angular grid

原来我需要改变：

ng-click="displayDescription(\'{{COL_FIELD}}\');

收件人：

ng-click=\'grid.appScope.displayDescription("{{COL_FIELD}}");

我无法告诉您为什么会这样，但我的应用程序现在可以按预期运行。感谢评论的人。

Answer 2

你不需要大括号，因为当你应用 ng 指令时你已经在 ng 中了：

<button ng-click = 'yourscopefn(yourscopevars,,)'>buttonface</button>

你不这样做 :

<button ng-click = 'yourscopefn({{yourscopevars}},,)'>buttonface</button>

错了！！

您需要为 ui-grid column def celltemplate 做的是：

{ name: 'yourcolumn', cellTemplate: 
' <a ng-href="#" ng-click="grid.appScope.yourfunction(COL_FIELD);">{{COL_FIELD}}</a>' }

Angular JS ui-grid cellTemplate 的 ng-click 在范围函数尝试将单元格信息作为参数传递时未触发

Angular JS ui-grid cellTemplate's ng-click not firing when scope function tries to pass the cell info as params

javascript

jquery

angularjs

angular-ui-grid