制作一个可重用的ui-bootstrap uib-dropdown指令

Question

我在指令中有几个Angular UI-Bootstrap下拉菜单......对于制造商和区域等我有相同的..唯一的区别是$ state.go目的地和用于获取数据的服务。似乎必须有更好的方法来做到这一点......任何想法？

/* Distributors DDL Directive  */
(function (angular) {
'use strict';
angular.module('ddlDistributors', [])
    .directive('ddlDistributors', ['$state', 'DistributorsService',
        function ($state, DistributorsService) {
            return {
                bindToController: {
                    distributors: '='
                },
                controllerAs: 'vm',
                scope: true,
                controller: function () {
                    var vm = this;
                    vm.distributors = DistributorsService.query();
                    vm.showDistricts = function (id, distributorname) {
                        console.log("clicked on distributorid: " + id);
                        $state.go('map.distributordistricts', { distributorid: id, distributorname: distributorname });
                    }
                },
                templateUrl: 'templates/ddl.distributors.html'
            }
        }
    ]);
})(window.angular)

这是模板......

<div class="btn-group" uib-dropdown is-open="status.isopen">
<button id="single-button" type="button" class="btn btn-primary" uib-dropdown-toggle ng-disabled="disabled" dropdown-text-set>
    Select Distributor <span class="caret"></span>
</button>
<ul class="uib-dropdown-menu" role="menu" aria-labelledby="single-button">
    <li role="menuitem" ng-repeat="distributor in vm.distributors"><a ng-click="vm.showDistricts(distributor.Id, distributor.Name)">{{distributor.Name}}</a></li>
</ul>