单元格模板内的 ng-click 不会触发控制器中的功能答案

【问题标题】：ng-click inside cell template does not trigger function in controller单元格模板内的 ng-click 不会触发控制器中的功能
【发布时间】：2018-04-07 14:29:25
【问题描述】：

我在这里创建了一个 plunker：http://plnkr.co/edit/zGqouwzxguef13lx48iP?p=preview

当我在日视图中单击 ui-grid 的一个单元格时，什么也没有发生。我所期望的是执行测试功能并显示带有文本“测试”的警报，但事实并非如此。

这里出了什么问题？

这是ui-grid 3.0最新版本的html单元格模板：

HTML

<div ng-click="test()" ng-switch="row.entity[row.grid.columns.indexOf(col)].isPeriod">

    <div ng-switch-when="true">
        <tabset>
            <tab>
                <tab-heading>
                    <i class="glyphicon glyphicon-book"></i>
                </tab-heading>period id:
                {{ row.entity[row.grid.columns.indexOf(col)].id}}
            </tab>
            <tab select="alertMe()">
                <tab-heading>
                    <i class="glyphicon glyphicon-bell"></i>
                </tab-heading>
                {{row.entity[row.grid.columns.indexOf(col)].content}}
            </tab>

        </tabset>      <!-- PeriodTemplate -->
    </div>
    <div ng-switch-when="false">
       <div>Hello empty template</div>
    </div>      <!-- EmptyPeriodTemplate -->
</div>

控制器：

'use strict';
angular.module('projectplanner').controller('DateplannerDayController', function ($scope, $state) {


    var columnHeaderDates = ['col1','col2','col3','col4','col5','col6','col7']
    $scope.columns = createColumnHeaders(columnHeaderDates);

var data = [{isPeriod: true, id: 10, rowNumber: 1},{isPeriod: false, id: 11, rowNumber: 2}]

  $scope.test = function()
  {
    alert('test');
  };

    $scope.gridOptions = {
        rowHeight: 200,
        data: data,
        enableSorting: false,
        enableColumnMenu: false,
        columnDefs: $scope.columns,
        onRegisterApi: function (gridApi) {
            $scope.gridApi = gridApi;
            $scope.gridApi.core.addRowHeaderColumn(
                { name: 'rowHeaderCol',
                    displayName: '',
                    width: 100,
                    cellTemplate: '<div>row header template</div>'
                });
        }
    };

    function createColumnHeaders(columnHeaders) {
        var columnDefinitions = [];
        for (var i = 0; i < columnHeaders.length; i++) {
            var column = {
                name: columnHeaders[i],
                cellTemplate: 'lessonplanner.day.celltemplate.html',
                field: i + 'x'
            }
            columnDefinitions.push(column);
        }
        return columnDefinitions;
    }
});

【问题讨论】：

使用外部作用域。在这里查看我的答案：stackoverflow.com/questions/26621598/…
@mainguy 这与 externalScopes 有什么关系？没有外部范围。来自 ui-grid 的 tut 侧的 ng-click 示例正在做同样的事情，就像我没有外部范围一样。嗯......这很奇怪，我可以发誓我已经看到这个 ng-click 在一个 cellTemplate 中工作在一个 plunker 上，但是 ui-grid 说：“UI-Grid 使用隔离范围，因此无法从行或单元格模板。”好的，那么我需要一个外部范围！！！谢谢哥们！
目前 ui-grid 的版本、教程和手册都是一团糟。我还认为不久前它在没有外部范围的情况下也可以工作。希望这能尽快退出测试版。顺便说一句：你在那里建造的令人印象深刻的 Plunker！
玩得开心，真正的应用更高级;-)

标签： angularjs angular-ui-grid

【解决方案1】：

此页面在我的搜索中不断弹出，我设法错过了 cmets 中的解决方案。总而言之，您可能需要使用 externalScopes。见Angular ui-grid events in cell header not firing和http://ui-grid.info/docs/#/tutorial/305_appScope

【讨论】：

stackoverflow.com/questions/26621598/… 中接受的答案不再有效，请参阅 Marcus 的答案，它是 ng-click="grid.appScope.myfunction()" 或 ng-click="grid.appScope.myfunction( row.entity.cellfield)"

【解决方案2】：

如果您使用的是 Controller-As 语法，请尝试：

ng-click= "grid.appScope.<controllerAliasName>.myFunction(row)"

【讨论】：

【解决方案3】：

这是因为 ui-grid 有自己的控制器，它不知道外部控制器。

为方便起见，请执行以下操作.. 1.首先将控制器分配给ui-grid。

var vm = this;
this.$scope.usersGridOptions = {
 appScopeProvider: vm,
 ....
}

现在，一旦你将控制器分配给网格，你就可以像这样调用函数了..

"<a type=\"button\"  href=\"\" ng-click=\"function(row.entity)\"> {{ row.entity.text}} </a>"

【讨论】：

使用 appScopeProvider 对我有用，由于某种原因，指定 grid.appScope.vm.myFunction() 在我的单元格模板中不起作用。使用 appScopeProvider 并将我的“vm”变量（在我的控制器中设置为“this”并包含 myFunction）传递给它，我只需要执行 grid.appScope.myFunction() 就可以了。

【解决方案4】：

在ui-grid，cell-template中，因为cell有自己的范围，

1) do not use onclick='', instead should use ng-click=''

2) ng-click='your_function()' will not work, should use, grid.appScope.your_function()

3) when pass parameter in function(), do not use function({{xxx}}), see sample below

cellTemplate: '<div class="ui-grid-cell-contents" title="TOOLTIP"><a href=""  ng-click="grid.appScope.watering_modal(grid.appScope.editLink_tree_id(grid, row),grid.appScope.editLink_site_no(grid, row),grid.appScope.editLink_crm(grid, row), grid.appScope.editLink_package_no(grid, row) )">{{grid.appScope.editLink_tree_id(grid, row)}}</a></div>'

【讨论】：