NG单击控制器

不会触发功能我已经创建了一个plunker这里：NG单击控制器

当我在UI格在天视图中单击单元格，然后什么也没有发生。我期望的是测试功能被执行并且一个警告显示为文本'test'，但事实并非如此。

这是怎么回事错在这里？

多数民众赞成在UI网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; 
    } 
});

来源

2014-11-04 Pascal

use externalScopes。看到我的答案在这里：http：//stackoverflow.com/questions/26621598/angular-ui-grid-events-in-cell-header-not-firing/26628361#26628361 – mainguy 2014-11-05 12:30:03

@mainguy这与externalScopes做什么？没有外部范围。 ui-grid的tut侧面的ng-click样例与我一样，没有外部范围，就是做同样的事情。嗯......这是奇怪的，我可以发誓我已经看到这个ng-click在单元模板上工作，但ui-grid说：“UI-Grid使用隔离作用域，所以不能从行或单元格模板“。好吧，我需要一个外部范围！谢谢哥们！ – Pascal 2014-11-05 16:27:53

目前，ui-grid的版本，教程和手册都是一团糟。我也认为它不久前没有外部范围。希望这个测试很快就会结束。顺便说一句：你在那里建造的令人印象深刻的布拉克尔！ – mainguy 2014-11-06 07:43:24

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

来源

2015-03-01 14:03:56 Fasermaler

外部示波器不再使用：http://stackoverflow.com/a/33792526/492130 – 2016-02-08 15:33:04

在https://stackoverflow.com/中接受的答案问题/ 26621598/angular-ui-grid-events-in-cell-header-not-firing/26628361＃26628361不再有效，请参阅Marcus的答案，它是ng-click =“grid.appScope.myfunction（）”或ng -click =“grid.appScope.myfunction（row.entity.cellfield）” – RandomUs1r 2017-10-06 22:07:27

这是因为ui网格有其自己的控制器，并且它不知道外部控制器。

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

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

，一旦你的控制器分配到电网，可以调用函数这样的..

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

来源

2016-11-17 23:18:10 ajeetkg

这对我不起作用 – itachi 2017-07-18 16:07:05

在UI电网，电池模板，因为细胞都有自己的范围，

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

来源

2017-09-29 15:18:11 hoogw

NG单击控制器

回答

相关问题