ng-clic all'interno del modello delle cellule non si innesca funzione nel controllo

Question

Ho creato un plunker qui:

Quando clicco in una cella della ui-griglia nella vista giorno e poi non succede nulla. Quello che mi aspettavo è che la funzione test è eseguita e un avviso è mostrato con il testo 'test', ma non è così.

Cosa sta succedendo qui?

Quello è il modello di cellulare html della ui-grid 3.0 ultima 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; 
    } 
}); 

Answer 1

Questa pagina continuava ad emergere nella mia ricerche e sono riuscito a perdere la soluzione nei commenti. Per riassumere, è probabile che tu debba utilizzare ExternalScopes. Vedi Angular ui-grid events in cell header not firing e http://ui-grid.info/docs/#/tutorial/305_appScope

Answer 2

È perché la rete ui ha il proprio controller e non conosce il controller esterno.

Per facilitare, effettuare quanto segue. 1. Prima assegnare il controller alla rete utente.

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

Ora, una volta che si assegna il controller alla griglia, è possibile richiamare la funzione come questo ..

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

Answer 3

In ui-grid, cellula-modello, a causa della cellula ha il suo ambito di applicazione ,

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