Problem using `select-field` inside another directive

[coryschires]

Goal

I'd like to make a timezone-field which is very similar to the standard select-field but pre-populated with time zone options. I would also like to have the option of setting a placeholder.

I'm shooting for an API that (using jade) looks like:

timezone-field(attribute='timezone') # no placeholder
timezone-field(attribute='timezone' placeholder="Select timezone")

Plan

I have a constant called TIME_ZONES which looks like:

{
  "label": "(GMT-08:00) Pacific Time (US & Canada)",
  "value": "Pacific Time (US & Canada)",
  "tzinfo": "America/Los_Angeles",
  "abbr": "PDT"
}, {
  "label": "(GMT-07:00) Mountain Time (US & Canada)",
  "value": "Mountain Time (US & Canada)",
  "tzinfo": "America/Denver",
  "abbr": "MDT"
}, {
  // And so on for each time zone ...
}

So, I'd like to define a timezone-field directive, inject TIME_ZONES, and use that constant to set the options on a select-field. Here's what I have so far (in coffeescript):

restrict: 'E'
template: '''
  <select-field
    attribute="{{ attribute }}"
    options="timeZones"
    placeholder="{{ placeholder }}"
  ></select-field>
'''
scope:
  attribute: '@'
  placeholder: '@'

link: ($scope, $element, $attributes) ->
  $scope.timeZones = TIME_ZONES

Problem

Somewhere in the process, the placeholder option is getting lost. The select renders as expected but with no placeholder. That's odd because $scope.placeholder logs the correct value within my directive. Somewhere, I assume inside select-field, the placeholder is being lost or overridden. Any ideas?

[bvaughn]

Hmm. Interesting concept! And very nicely written description. Thanks! :)

It's a little late here but...off the top of my head, one thing that is different between attribute and placeholder is that form for watches for changes in attribute whereas it only reads in the initial value of placeholder. So it's possible that your placeholder/attribute isn't being initialized correctly, although looking at your CoffeeScript snippet...I'd kind of expect them to work.

Any chance you could toss up a Plunker for me to take a look at? I'd be happy to take a look in the morning. :)

[bvaughn]

I've created a Plunker that simulates the situation you described above:
http://plnkr.co/edit/PwAZJ7abZPjgFFJOJiCs?p=preview

From what I can tell, this behaves as expected.

I believe the key to your problem was that you omitted the prevent-default-option attribute. That attribute tells the selectField not to default-select the first option. :)

[coryschires]

Damn! I was just now working on the plunker. I just tried adding prevent-default-option to my code and it now works as expected. Thanks!

PS: Completely separately, I'm thinking about contributing a set of templates for Foundation. Would you be interested in that?

[bvaughn]

No worries. Glad you've got it working now.

Foundation templates have actually been requested before (see issue #83). If you'd like to put them together, and would be willing to help with any maintenance issues that might come along with them, I'd be happy to have the pull request. :)

I've been gradually introducing Protractor integration tests as well. We'd also want to get the Foundation templates plugged into those.