这是我为填充材料的md菜单而制作的angularjs组件：
<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配置的组件(通常我更喜欢使用单值绑定(。请注意，可以将这个长配置写入父控制器中的一个变量中，以使上面的内容更简洁。
我的同事说这是一个糟糕的做法，因为在他看来，在这个组件中，"逻辑在样式内部；而不是将逻辑、内容和设计分开"(我不太明白这意味着什么(。
他更喜欢使用ngTransclude；但我认为使用ngTransclude会使其html语法部署与不使用组件一样长。
我见过许多组件以"复杂配置"作为输入，而它们的html选择器(用法(很短，比如Angular的ng2智能表：https://akveo.github.io/ng2-smart-table/#/documentation
那么，从纯粹的好/坏实践的角度来看，上面的方法有什么不好？还有什么更好的选择呢？
myApp.controller('DemoController', ["clientId", "planetName", function DemoController(clientId, planetName) {
this.clientId = clientId;
this.planetName = planetName;
}]);
<html ng-app="myApp">
<body ng-controller="DemoController as demo">
Client ID: {{demo.clientId}}
<br>
Planet Name: {{demo.planetName}}
</body>
</html>