Контроллеры Angular составляют основу любого 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>
Переменные области видимости (scope) используются по стандартному паттерну, за исключением загрузки данных. Чтобы заполнить datatable данными из $scope контроллера, используйте директиву webix-data. Она указывается в теге div, который инициализирует datatable.
Код ниже получает $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
Как видно из кода выше, все операции с данными datatable выполняются через изменение набора данных scope. В HTML функция addRecord() вызывается директивой ng-click:
<body ng-controller="webixGridController"> <!--Контроллер Angular-->
<!--Компоненты Webix-->
<div webix-ui="config" webix-data="records"></div>
<button ng-click="addRecord()">Add Row</button>
</body>
Данные datatable обновляются при каждом изменении $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>
Функция контроллера ChangeLine() переопределяет 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
Наверх