Работа с событиями в Angular

Основные принципы обработки событий Webix описаны в соответствующей статье документации.

У фреймворка есть несколько директив для работы с событиями страницы (ngClick, ngChange, ngKeyPress, ngMouseMove). Их также можно использовать в гибридных приложениях.

<button ng-click="changeLine('line')">Show Line Chart</button>

Related sample: Webix-Angular:Chart

У компонентов Webix есть собственные события (onItemClick, onSelectChange, onAfterTabClick и другие), которые нельзя обработать средствами Angular.

Директива webix-event

Для работы с событиями, у Webix предусмотрена директива webix-event. Она вызывает функцию из области видимости, которая выполнит нужные действия:

<body ng-controller="webixTestController">
 
<div webix-ui view="cols" type="space">
  <!--столбец с datatable-->    
  <div view="datatable" webix-data="records" 
        webix-event="onItemClick = showDetails(id, details)" select="row">
    <!--столбцы datatable-->
  </div>
  <!--столбец с template-->
  <div>
    Selected ID: { { selectedId } }
  </div>
</div>
 
</body>

В примере выше, событие таблицы onItemClick обрабатывается с помощью функции showDetails(). Она отображает ID выбранного ряда таблицы в template как {{ selectedId }}.

Обработчик события в контроллере

Контроллер приложения

var app = angular.module('webixApp', [ "webix" ]);
 
app.controller("webixTestController", function($scope){
  $scope.records = [ ..datatable data..];
 
  $scope.showDetails = function(id, details){
    $scope.selectedId = id.row; // определяем значение для selectedId
    $scope.$digest();
  }
});

Related sample: Webix-Angular:Events

Учитывайте, что функция, вызванная директивой webix-event, принимает только два параметра: - ID элемента (отправленное событием Webix) - детали события (все параметры, отправленные событием Webix).

Для примера, событие таблицы onItemClick возвращает три параметра:

объект с данными выбранного элемента (id, row, column)
объект нативного события
HTML элемент, который инициировал событие.

Шаблон обработки событий Webix

grid.attachEvent("onItemClick", function(id, event, node){
    // логика обработчика 
});

В Angular, объект события и целевой элемент события передаются вместе с информацией об элементе (в параметре details):

app.controller("webixTestController", function($scope){
 $scope.showDetails = function(id, details){
    $scope.selectedId = id.row; 
    /*вы также можете получить ID как*/  
    $scope.selectedId = details[0].row; 
 
    $scope.eventType = details[1].target.getAttribue("class");
    $scope.nativeElement = details[2].tagName;
 
    $scope.$digest();
  }
}

Помните, что Angular не обрабатывает HTML объекты (event, element). Эти объекты будут возвращаться как бы пустыми (но не совсем):

$scope.showDetails = function(id, details){
    $scope.eventType = details[1]; // возвращает {}
    $scope.nativeElement = details[2] // возвращает {}
 
    $scope.eventType = details[1].type; // возвращает "click"
    $scope.nativeElement = details[2].tagName; // возвращает "DIV"
}

Обработка нескольких событий компонента

Директива webix-event позволяет устанавливать несколько событий одновременно:

<div view="datatable" webix-data="records"  
webix-event="onItemClick = show1(id, details); onAfterSort = show2(id, details);">
    <!--столбцы таблицы-->
</div>

Для обработки каждого события вам необходимо указать специальную функцию (или создать общую функцию для этих событий):

app.controller("webixTestController", function($scope){
  $scope.show1 = function(id, details){
    // ...
  };
 
  $scope.show2 = function(id, details){
    // ...
  };
}

Подробности можно узнать в примере ниже.

Related sample: Webix-Angular:Events

Наверх