我在这里创造了一个洞穴:
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 firing和
http://ui-grid.info/docs/#/tutorial/305_appScope
原文链接:https://www.f2er.com/angularjs/140410.html