Это компонент angularjs, который я сделал для заполнения md-меню материала:
<link href="./components/base-components/ellipsis-menu/ellipsis.css"
rel="stylesheet">
<md-menu >
<md-button aria-label="Open phone interactions menu"
class="md-icon-button"
ng-click="ctrl.openMenu($mdMenu, $event,$index)">
<md-icon md-font-icon="fa fa-ellipsis-v"
style="color: rgb(189, 187, 187);">
</md-icon>
</md-button>
<md-menu-content width="4">
<md-menu-item ng-repeat="item in ctrl.functionsArray.arr">
<md-button ng-click="ctrl.click(item.function, item.args)" >
<md-icon md-font-icon="{{item.icon}}"
ng-style="item.style"
md-menu-align-target="">
</md-icon>
{{item.label}}
</md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
и JS:
function eCtrl($scope,$mdMenu) {
this.openMenu = function ($mdMenu, ev) {
originatorEv = ev;
$mdMenu.open(ev);
};
}
angular.
module('clientApp').
component('appEllipsis', {
templateUrl: 'components/base-components//ellipsis-menu/ellipsis.html',
controller: eCtrl,
controllerAs: 'ctrl',
bindings: {
functionsArray:"<", //{arr:[{label:'', function:'',args:'', icon:'', style:'color: black;'},..etc]},
}
});
Поэтому его использование что-то вроде:
<app-ellipsis functions-array="{
arr:[{
function:ctrl.openAcceptConfirm,
icon:'fa fa-check',
args:[$event,offer._id],
label: 'Accept',
style:{'color': 'green'}
},{
function:ctrl.openRejectConfirmObligor,
icon:'fa fa-times',
args:[$event, offer._id],
label: 'Reject',
style:{'color': 'red'}
}]}"
></app-ellipsis>
Таким образом, он принимает входные данные, которые представляют собой массив объектов, каждый из которых содержит функцию, аргументы функции, класс значка, метку и цвет. Это единственный компонент, который я сделал, который требует такой длинной конфигурации json (обычно я предпочитаю использовать привязки с одним значением). Обратите внимание, что этот длинный конфиг может быть записан в переменную в контроллере родителя, чтобы сделать вышеупомянутый аккуратнее.
Мой коллега сказал, что это плохая практика, так как, по его мнению, «логика c находится внутри стиля и не отделяя логи c, от контента, от дизайна "в этом компоненте (что я не очень понимаю, что это значит).
Он предпочел бы вместо этого использовать ngTransclude; но я думаю, что использование ngTransclude позволит развернуть синтаксис html, если не использовать компонент.
Я видел много компонентов, которые принимают "сложную конфигурацию" в качестве входных данных, в то время как их селектор html (использование) коротко, как таблица Angular ng2-smart: https://akveo.github.io/ng2-smart-table/# / документация
Итак, что же плохого в подходе выше, с точки зрения чистой / плохой практики? И какая лучшая альтернатива? (И почему)