私は角度uiグリッドを使用しています。 http://ui-grid.info/docs/#/tutorial/102_sorting ヘッダーアイコンVをクリックすると警告を表示したいと思います。現在、vアイコンをクリックすると、helloというテキストが表示されています。アイコンをクリックするとアラートを表示できますか？ここで角度jsのヘッダーでclickイベントを見つけるにはどうすればよいですか？
は私のコードです： 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;
});
ライブデモが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"> </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