如何在角js上查找標題上的點擊事件？

我正在使用角度ui網格。 http://ui-grid.info/docs/#/tutorial/102_sorting 我想單擊標題圖標V時顯示警報。目前，當我點擊v圖標時，它會顯示hello文字。當我點擊圖標時是否可以顯示警報？如何在角js上查找標題上的點擊事件？

這裏是我的代碼： http://plnkr.co/edit/UAElQb8dl9qr5Cwmjg6q?p=preview

$http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json') 
    .success(function(data) { 
     $scope.gridOptions1.data = data; 
    });

來源

2016-05-27 user944513

現場演示是here。

您可以通過headerCellTemplate和extrenal-scopes訪問頭單元格單擊事件：這裏

文檔：Ui-grid custom templates

自定義的行模板，合併所有的細胞一起當entity.merge值真正。

您可以在行模板中使用grid.appScope來訪問控制器作用域中的元素。

var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid']); 
 

 
app.controller('MainCtrl', ['$scope', '$http', 'uiGridConstants', function($scope, $http, uiGridConstants) { 
 
    $scope.gridOptions1 = { 
 
    enableSorting: true, 
 
    columnDefs: [{ 
 
     field: 'name' 
 
    }, { 
 
     field: 'gender' 
 
    }, { 
 
     field: 'company', 
 
     enableSorting: false, 
 
     headerCellTemplate: '' 
 
     +'<div role="columnheader" class="sortable" aria-sort="none">' 
 
     +'<div role="button" class="ui-grid-cell-contents ui-grid-header-cell-primary-focus">' 
 
      +'<span class="ui-grid-header-cell-label ng-binding">Company</span>' 
 
     +'</div>' 
 
     +'<div role="button" class="ui-grid-column-menu-button" aria-label="Column Menu" ng-click="grid.appScope.showAlert();">' 
 
      +'<i class="ui-grid-icon-angle-down" aria-hidden="true">&nbsp;</i>' 
 
     +'</div>' 
 
     +'</div>' 
 
    }], 
 
    onRegisterApi: function(gridApi) { 
 
     $scope.grid1Api = gridApi; 
 
    } 
 
    }; 
 

 
    $scope.showAlert = function() { 
 
    alert('ts'); 
 
    } 
 

 

 
    $http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json') 
 
    .success(function(data) { 
 
     $scope.gridOptions1.data = data; 
 
    }); 
 
}]);

.grid { 
 
    width: 500px; 
 
    height: 200px; 
 
}

<!doctype html> 
 
<html ng-app="app"> 
 
    <head> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script> 
 
    <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script> 
 
    <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script> 
 
    <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script> 
 
    <script src="http://ui-grid.info/release/ui-grid.js"></script> 
 
    <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css"> 
 
    <link rel="stylesheet" href="main.css" type="text/css"> 
 
    </head> 
 
    <body> 
 

 
<div ng-controller="MainCtrl"> 
 

 
    <div id="grid1" ui-grid="gridOptions1" external-scopes="externalScopes" class="grid"></div> 
 

 
    
 
</div> 
 

 

 
    <script src="app.js"></script> 
 
    </body> 
 
</html>

[注意：]

我不知道這是警告你想要什麼。如果是或接近，這個標題單元格模板是一個非常簡單的演示，更多關於默認標題單元格模板是here

來源

2016-05-27 02:49:00

如何在角js上查找標題上的點擊事件？

回答

相關問題