ng-click 内部单元格模板不会触发控制器中的功能 [英] ng-click inside cell template does not trigger function in controller

问题描述

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

当我在日视图中单击 ui-grid 的单元格时，什么也没有发生.我期望的是执行测试函数并显示带有文本test"的警报，但事实并非如此.

这里出了什么问题?

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

HTML

<div ng-switch-when="true"><标签集><标签><标签标题><i class="glyphicon glyphicon-book"></i></tab-heading>期间ID:{{ row.entity[row.grid.columns.indexOf(col)].id}}</tab><tab select="alertMe()"><标签标题><i class="glyphicon glyphicon-bell"></i></tab-heading>{{row.entity[row.grid.columns.indexOf(col)].content}}</tab></tabset><!-- PeriodTemplate -->
<div ng-switch-when="false"><div>你好空模板</div>

<!-- EmptyPeriodTemplate -->

控制器:

'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(){警报('测试')；};$scope.gridOptions = {行高:200，数据:数据，启用排序:假，启用列菜单:假，columnDefs: $scope.columns,onRegisterApi: 函数 (gridApi) {$scope.gridApi = gridApi;$scope.gridApi.core.addRowHeaderColumn({名称:'rowHeaderCol'，显示名称: ''，宽度:100，cellTemplate: '<div>行标题模板</div>'});}};函数 createColumnHeaders(columnHeaders) {var columnDefinitions = [];for (var i = 0; i < columnHeaders.length; i++) {变量列 = {名称: columnHeaders[i],cellTemplate: 'lessonplanner.day.celltemplate.html',字段:我 + 'x'}columnDefinitions.push(column);}返回列定义；}});

解决方案

这个页面一直在我的搜索中弹出，我设法错过了评论中的解决方案.总而言之，您可能需要使用 externalScopes.请参阅 单元格标题中的 Angular ui-grid 事件不触发 和 http://ui-grid.info/docs/#/教程/305_appScope

I have created a plunker here: http://plnkr.co/edit/zGqouwzxguef13lx48iP?p=preview

When I click in a cell of the ui-grid in the day view then nothing happens. What I expected is that the test function is executed and an alert is shown with text 'test' but that is not the case.

What is going on wrong here?

Thats the html cell template of the ui-grid 3.0 latest release:

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>

CONTROLLER:

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

解决方案

This page kept popping up in my searches and I managed to miss the solution in the comments. To summarize, you likely need to use externalScopes. See Angular ui-grid events in cell header not firing and http://ui-grid.info/docs/#/tutorial/305_appScope

这篇关于ng-click 内部单元格模板不会触发控制器中的功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！