Контроллеры - это сердце любого приложения на основе Angular. При интеграции Webix и Angular функционал контроллеров сохраняется.
По аналогии с Angular, директивы контроллера включаются в приложение как атрибуты любого тега.
<html ng-app="webixApp"> <!--Инициализация приложения в Angular-->
<body ng-controller="webixTestController"> <!--Контроллер Angular-->
<!--Компоненты Webix-->
<div webix-ui view="datatable" webix-data="records" select="row">
...<!--конфигурация datatable-->
</div>
</body>
</html>
Доступ к области видимости переменных можно получить привычным способом. Исключением является только загрузка данных. Чтобы заполнить datatable данными из контроллера ($scope), используйте директиву webix-data. Ее нужно указать в теге div, который инициализирует таблицу.
В коде ниже мы получаем данные через $scope.records и парсим их в datatable:
<div webix-ui view="datatable" webix-data="records" >...</div>
Сортировка и фильтрация таблицы реализуется следующим образом:
<input ng-model="query" ... />
<select ng-model="orderProp">...</select>
<div webix-ui view="datatable"
webix-data="records|filter:query|orderBy:orderProp">
...
</div>
Код контроллера
var app = angular.module('webixApp', [ "webix" ]);
app.controller("webixTestController", function($scope){
$scope.records = [
{ id: 1, title: "The Shawshank Redemption",
year: 1994, votes: 678790, rating: 9.2, rank: 1},
{ id: 2, title: "The Godfather", year: 1972,
votes: 511495, rating: 9.2, rank: 2},
// ...
];
$scope.addRecord = function(){
$scope.records.push({
title: "New Record",
rating: 999,
votes: 0,
year: 2013
});
};
Related sample: Webix-Angular:Grid
Как вы уже заметили, все операции с данным таблицы осуществляются через манипуляции с набором данных из области видимости ($scope). Директива ng-click вызывает функцию addRecords() прямо в HTML разметке:
<body ng-controller="webixTestController"> <!--Контроллер Angular-->
<!--Компоненты Webix-->
<div webix-ui view="datatable" webix-data="records" select="row">
...<!--конфигурация datatable-->
</div>
<button ng-click="addRecord()">Add Row</button>
Данные в таблице отреагируют на любые изменения в $scope.records. В этом и заключается принцип связывания в Angular.
В соответствии с концепцией Angular, все функции должны хранится в контроллере приложения (даже если это собственный метод компонента).
<body ng-controller="webixTestController">
<div style="width: 500px; height: 200px;">
<div webix-ui view="chart" id="mychart" webix-data="lines"
type="bar" value="#sales#" borderless="true"></div>
</div>
<button ng-click="changeLine('line')">Show Line Chart</button>
</body>
Функция сhangeLine() переопределяет chart и задает ему новый тип:
Код контроллера
$scope.lines = [
// данные для chart
{ id: 1, sales: 20, year: "02"},
{ id: 2, sales: 55, year: "03"},
...
];
$scope.changeLine = function(type){
// методы chart вызываются по его ID
$$("mychart").define("type", type);
$$("mychart").render();
};
Related sample: Webix-Angular:Chart
Наверх