Complete description on how to use the inplace-select control that helps you have a drop down for edit. With configurable services to download the choices from this is quite handy

inplaceselect.md

Requirement

1. We need a control, or for that matter a self sufficient directive that would help us select choices onto a specific field of an object, or the object itself
   • The control comes to play on requirement of the user to edit the value on the object
   • The control once done selecting should switch back to only displaying the value
2. Such a multi option select control to have a configuration that downloads the choices once for all instances of the control
3. This control ought be configurable for the services it uses to get the choices from. The control has to be agostic of the domain and since the services are attached to the domain it would mean the services shoould be dynamically injected in the directives

Inclusions

1. Bootstrap.css 3.xx : the control uses bootstrap controls formatting , so to make it appear like one of those flat contemporary controls you would have to include Bootstrap css styles
2. Bootstrap.js 3.xx : For the drop down menu to work as it would in bootstrap, include the source file
3. Angular.js 1.4xx: what in the world would we do if we did not have angular ?

Manifestation

<!--the drop down and the icons to start editing would be injected by the directive-->
<!--field: this is the field onto which the selection would be impressed on-->
<!--editing:this is the state of the control at the onset, describes if editing mode or display-->
<!--fnGetChoices:service which has asynchronous function to get the choices-->
 <inplace-select config="{field:map.rating, editing:false, fnGetChoices:'$svcMaps.ratings'}">
    <!--transcluded content that appears in the display mode-->
    <h4>{{map.rating.title}}</h4>
</inplace-select>

The directive processes a single configuration object that allows to set up the initials of the directive. Configuration object has name sensitive properties that can used to set specific values of the control.

Services providing choices

    var $svcChoices = angular.module("myApp").service("$svcChoices", function () {
        //this service only to store the choices.
        this.choices = [];
    }
  var $svcMaps = angular.module("myApp").service("$svcMaps", function ($timeout, $q,  $svcChoices) {
        //gets the skill ratings either from the server or from the stored service cache
        //this function below gets injected in the directive which it uses to get the choices either from the server or the cache
        this.ratings = function () {
            var deferred = $q.defer();
            if ($svcChoices.choices.length == 0) {
                //this is where we are making a call to the server since the choices have not been downloaded
                //timeout has been implemented to simulate the server delay
                $timeout(function () {
                   //get from the server or bounce back from mock service
                   $svcChoices.choices = //assign data
                }, 1900)
            }
            else {
                //this where we just get the choice from the service and not make any calls to the server
                deferred.resolve($svcChoices.choices);
            }
            return deferred.promise;
        }
    }