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

Question

我似乎无法让 ng-click 为我触发，我已经尝试了几个小时。我已经阅读了很多关于 SO 的类似问题，但似乎没有一个能解决我的问题。请注意，如果我将 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

你不需要大括号，因为当你应用 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>' }