UI-Select is one of the most popular module for front-end development. it has lots of customizable options, which help to make the UI layer more interactive. So rather than calling the same config thing all the time, why not create a own directive which will accept some params as attribute like field name and config options.

So I create the following directive. here is the way of doing that:

1. Template for the directive, foodropdown.html

{{ select.selected[fooOptions.valueField] || select.selected}} {{option[fooOptions.valueField]}} {{$item[fooOptions.valueField]}} {{option[fooOptions.valueField]}}

2. wirte the directives. fooDropdown.js



(function () { 'use strict'; angular.module('footheme').directive('fooDropdown', fooDropdownDirective); fooDropdownDirective. inject = [' http']; function fooDropdownDirective ( http) { var directive = { scope: { fooModel: '=', fooOptions: '=' }, restrict: 'AE', replace: false, templateUrl: 'directives/fooDropdown/templates/dropdown.html', link: fooDropdownLink, compile: fooDropdownCompile, controller: fooDropdownController }; return directive; function fooDropdownCompile(ele, attr) {} // end of comiple method function fooDropdownLink(scope, ele, attr, ctrl) { scope.triggerCallback = function(){ } } // end of link method function fooDropdownController( scope) { init(); scope.refreshDropdownList = refreshDropdownList; scope.triggerCallback = triggerCallback; function init () { console.log('name', scope.fooModel, ' options: ', scope.fooOptions); scope.fooOptions.idField = _.isEmpty( scope.fooOptions.idField) ? 'id' : scope.fooOptions.idField; scope.fooOptions.valueField = _.isEmpty( scope.fooOptions.valueField) ? 'value' : scope.fooOptions.valueField; setOptions(); } function setOptions() { scope.fooOptions.dataSource = !_.isEmpty( scope.fooOptions.dataSource) ? scope.fooOptions.dataSource : []; if (_.isEmpty( scope.fooOptions.remoteDataSource)) { scope.fooOptions.dataSource = prepareOptionsList( scope.fooOptions.dataSource); } else { http.get( scope.fooOptions.remoteDataSource).then(function (responseObj) { scope.fooOptions.dataSource = prepareOptionsList(responseObj); }); } } function prepareOptionsList( listObj) { var optionsList = [], arr = []; if (_.hasIn( listObj, 'data')) { optionsList = listObj.data; if (_.hasIn(optionsList, 'data')) { optionsList = optionsList.data; } }else{ optionsList = listObj; } _.forEach(optionsList, function (option, key) { arr.push( _.isObject(option) ? option : {id: key, text: option} ); }); return arr; } function refreshDropdownList(searchString) { console.log('searchString: ', searchString); if (_.isEmpty( scope.fooOptions.remoteDataSource)) { console.log('Oops! No remoteDataSource defined to remote filter'); return false; } http.get( scope.fooOptions.remoteDataSource + '?searchQuery=' + searchString).then(function (responseObj) { scope.fooOptions.dataSource = prepareOptionsList(responseObj); }); } function triggerCallback(fooModel, item) { scope.fooModel = fooModel; // otherwise its not updating. scope.fooOptions.onSelect && scope.fooOptions.onSelect( $scope.fooModel, item); } }// end of controller }// end of directive }());

3. Syntax of the directive:

4. To test the directive, pass the parameters, in the following way:

