Мне нужно создать независимую директиву сетки в угловом. Данные и действия будут установлены в контроллере. Действие может относиться к другим контроллерам или другим действиям в родительском контроллере. Оба варианта возможны.Как создать угловую простую независимую директиву сетки, полностью сконфигурированную в контроллере?
Вот живой пример: http://plnkr.co/edit/efe4notoE1TyONH3W347?p=preview
в index.html
<body ng-controller="MainCtrl">
<div grid data="data" action-list="actionList" call="call(fun, row)"></div>
</body>
контроллер
app.controller('MainCtrl', function($scope) {
$scope.data = [
{id: 1, name: 'aaa'},
{id: 2, name: 'bbb'},
{id: 3, name: 'ccc'}
];
// actions (show, delete) have to be defined before $scope.actionList
$scope.show = function (row) {
alert('show: ' + row.id + ':' + row.name);
}
$scope.delete = function (row) {
alert('delete: ' + row.id);
}
$scope.actionList = [
{ label: 'edit', href: '#/edit/{{row.id}}', title: 'to other CTRL' },
{ label: 'show', click: $scope.show, title: 'use ngClick' },
{ label: 'delete', click: $scope.delete, title: 'use ngClick' }
];
// call any action in this CTRL
$scope.call = function (fun, row) {
fun(row);
}
});
директива сетки. Параметр call будет использоваться для передачи всех функций действия контроллеру. hrefCompiled компилировать href действия (например #/edit/{{row.id}})
app.directive('grid', function() {
return {
scope: {
data: '=',
actionList: '=',
call: '&'
},
//
controller: function ($scope, $interpolate) {
$scope.hrefCompiled = function (action, row) {
if (action.href) {
return $interpolate(action.href)({row: row})
}
return '';
}
},
templateUrl: 'grid.html'
}
});
grid.html
<table>
<tr>
<th ng-repeat="(key, value) in data[0]">{{key}}</th>
<th>actions</th>
</tr>
<tr ng-repeat="row in data">
<td>{{row.id}}</td>
<td>{{row.name}}</td>
<td>
<span ng-repeat="action in actionList">
<a href="{{hrefCompiled(action, row)}}"
ng-click="call({fun: action.click, row: row})"
title="{{action.title}}">{{action.label}}</a>
</span>
</td>
</tr>
</table>
Вот живой пример: http://plnkr.co/edit/efe4notoE1TyONH3W347?p=preview
Может быть, это не лучшая практика, но это работает. Пожалуйста, помогите мне улучшить его. Спасибо.
При попытке изменить или удалить его не имеет никакого эффекта. –