Контроллеры - это сердце любого приложения на основе Angular. При интеграции Webix и Angular функционал контроллеров сохраняется.
По аналогии с Angular, директивы контроллера включаются в приложение как атрибуты любого тега.
<html ng-app="webixApp"> <!--Инициализация приложения в Angular-->
<body ng-controller="webixGridController"> <!--Контроллер Angular-->
<!--Компоненты Webix-->
<div webix-ui="config" webix-data="records"></div>
</body>
</html>
Доступ к области видимости переменных можно получить привычным способом. Исключением является только загрузка данных. Чтобы заполнить datatable данными из контроллера ($scope), используйте директиву webix-data. Ее нужно указать в теге div, который инициализирует таблицу.
В коде ниже мы получаем данные через $scope.records и парсим их в datatable:
<div webix-ui="config" webix-data="records"></div>Сортировка и фильтрация таблицы реализуется следующим образом:
<div webix-ui="config" webix-data="records|filter:query|orderBy:orderProp"></div>Код контроллера
const app = angular.module('webixApp', [ "webix" ]);
app.controller("webixGridController", 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.query = "1979";
$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="webixGridController"> <!--Контроллер Angular-->
<!--Компоненты Webix-->
<div webix-ui="config" webix-data="records"></div>
<button ng-click="addRecord()">Add Row</button>
</body>
Данные в таблице отреагируют на любые изменения в $scope.records. В этом и заключается принцип связывания в Angular.
В соответствии с концепцией Angular, все функции должны храниться в контроллере приложения (даже если это собственный метод компонента).
<body ng-controller="webixChartController">
<div
webix-ui="config"
webix-data="lines"
webix-watch="false"
style="width:500px; height:200px;">
</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
Наверх