एनजी-क्लिक करें नियंत्रक

Question

में समारोह ट्रिगर नहीं करता मैं एक plunker यहाँ बनाया है:

जब मैं दिन को ध्यान में रखते ui ग्रिड के एक सेल में क्लिक करें, फिर कुछ नहीं होता। मुझे उम्मीद थी कि परीक्षण समारोह निष्पादित किया गया है और पाठ 'परीक्षण' के साथ एक चेतावनी दिखायी जाती है लेकिन ऐसा नहीं है।

यहां क्या गलत हो रहा है?

ui ग्रिड 3.0 नवीनतम रिलीज के HTML सेल टेम्पलेट Thats:

एचटीएमएल

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

Answer 1

इस पृष्ठ में पॉपिंग रखा मेरी खोजों और मैं टिप्पणियों में समाधान याद करने में कामयाब रहे। संक्षेप में, आपको बाहरीस्कोप का उपयोग करने की आवश्यकता है। Angular ui-grid events in cell header not firing और http://ui-grid.info/docs/#/tutorial/305_appScope

Answer 2

ऐसा इसलिए है क्योंकि यूई-ग्रिड का अपना नियंत्रक है और यह बाहरी नियंत्रक के बारे में नहीं जानता है।

सुविधा के लिए, निम्नलिखित करने के लिए .. 1. पहले नियंत्रक को यूई-ग्रिड को असाइन करें।

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

अब, एक बार आप ग्रिड से नियंत्रक असाइन करते हैं, आप समारोह इस तरह, आह्वान कर सकते हैं ..

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

Answer 3

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