在单元格模板中的anglejs-ng-click不会在控制器中触发功能

前端之家收集整理的这篇文章主要介绍了在单元格模板中的anglejs-ng-click不会在控制器中触发功能前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我在这里创造了一个洞穴: http://plnkr.co/edit/zGqouwzxguef13lx48iP?p=preview

当我在日视图中单击ui-grid的单元格时,没有任何反应.我期望的是测试功能被执行,并且用文本’test’显示警报,但情况并非如此.

这里发生了什么事?

这是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;
    }
});
这个页面保持弹出我的搜索,我设法错过了评论中的解决方案.总而言之,您可能需要使用externalScopes.见 Angular ui-grid events in cell header not firinghttp://ui-grid.info/docs/#/tutorial/305_appScope

猜你在找的Angularjs相关文章