How to create a directive for a dropdown choice?

Question

Let's say I use quite some dropdown choices (aka comboboxes) for countries in my application. To avoid repeating the same code over and over again, I want to create a directive for that.

However: Using following directive doesn't meet all my expectations (see below), while copy-pasting the template does meet all my expectations..

app.directive('countrydropdown', function($compile) {
  return {
    restrict: 'E', //attribute or element
    scope: {
      countryUri: '='
    },
    templateUrl: 'countrydropdown.html',
    controller : function($scope) {
      $scope.listItems = [ 
        {name: 'Afghanistan', code: 'AF'},
        {name: 'Åland Islands', code: 'AX'},
        {name: 'Albania', code: 'AL'},
      ];

where my template is:

<div>
  model (inside directive): {{countryUri}}

   <ui-select ng-model="countryUri" theme="selectize" >
    <ui-select-match placeholder="Select or search a country in the list...">{{$select.selected.name}}</ui-select-match>
    <ui-select-choices repeat="'/api/countries/'+country.code as country in listItems | filter: $select.search">
      <span ng-bind-html="country.name | highlight: $select.search"></span>
      <small ng-bind-html="country.code | highlight: $select.search"></small>
    </ui-select-choices>
  </ui-select>

</div>

What I expect it to do:

Changing the first combo, changes the model $scope.mydata.selectedCountry. This change should also affect / update the second combo
Changing the second combo, changes the model $scope.mydata.selectedCountry. Here also, the first combo should be affected / updated
Pressing the clear button should clear the selections in both comboboxes (because the clear button makes the model $scope.mydata.selectedCountry == null)

I must be doing someting wrong, but I can't find it. Se my example in this plukr: http://plnkr.co/edit/oF1R0F1udfiRulx5NvLO?p=preview

Note that making changes in the first combobox, everyting seems to work fine. (second combo updates fine) Once I make a selection on the second, the binding seems to be 'broken'

Any hints on this?

Jiam30 · Answer 1 · 2016-03-21T11:09:02.833

I modified your code to make the <ui-select> have an object field as ng-model instead of a primitive. 2-way data-binding to a primitive can be problematic in case of a parent/child scope situation: https://github.com/angular/angular.js/wiki/Understanding-Scopes

So here is the main change:

<ui-select ng-model="countryData.selectedCountry"></ui-select>

Plunkr: http://plnkr.co/edit/wCiUoI4aeYPs01FMIVwO

Edit: If you don't want to hardcode "selectedCountry" in your directive, you could do the following:

<country-dropdown country-data="mydata" field="selectedCountry"></country-dropdown>

With your directive template looking like this:

<ui-select ng-model="countryData[field]">
 ...
</ui-select>

Plunkr: http://plnkr.co/edit/KdgF8U2KqfiqVZS6BS5N

Thanks for your answer. Indeed, your plunker works. But working this way limits the usage of the directive. I want to 'store' the country uri in different properties. For example. data.birthCountry, data.currentStayCountry, etc. I don't think it would be a nice solution to have 2 directives for that, no? — Pieter Degraeuwe, Mar 20 '16 at 14:26

How to create a directive for a dropdown choice?

1 Answers1