Question

我似乎无法点击为我开火，而且我已经尝试了好几个小时。我已经在SO上阅读了一堆类似的问题，但似乎没有解决我的问题。请注意，如果我更改ng-click以点击事件，则会触发。

我的JS：

＆＃13;

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();
}]);

＆＃13;

＆＃34; Matter_Descriptions＆＃34; column有一个自定义单元格模板，需要调用＆＃34; displayDescription＆＃34;方法。到目前为止，我根本无法解雇它。

我的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

我在SO：Button click does not work in Celltemplate angular grid

上找到了这个解决方案

事实证明我需要改变：

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

要：

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

我无法告诉你为什么会这样，但我的应用程序现在按预期工作。感谢那些评论的人。

Answer 2

你不需要支持，因为当你申请ng-directive时你已经在内部了：

<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>' }

当范围函数尝试将单元格信息作为参数

2 个答案: