When I use Zrub Foundation drop down buttons inside an Angular partial, they look OK at first glance, but but when you click to display the choices, they are not displayed. The color of the botton on hover and click change as they should, it's just the list items do not display.
There are no errors in the console. Also, if I put the button code directly in index.html, the drop down behavior works fine.
Any ideas on how to get the dropdown button working inside a partial?
app.js
'use strict';
angular.module('myapp', ['myappFilters', 'myappServices']).
config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/test', {templateUrl: 'partials/test.html', controller: EnvListCtrl}).
}]);
test.html
<div href="#" class="medium button dropdown full-width">
Dropdown Button
<ul>
<li><a href="#">Choice 1</a></li>
<li class="divider"></li>
<li><a href="#">Choice 2</a></li>
<li><a href="#">Choice 3</a></li>
</ul>
</div>
My work-around was to trigger change on the select element, and then click on the anchor and list elements.
This essentially initializes the dropdown element to display properly with consideration to whatever is set as the selected element.
I have the dropdown inside a reveal modal, which is inside a partial. In my case, I initialize the element before activating the modal.
markup
<select style="display:none;" id="customDropdown"
ng-options="o.label for o in apptStatusOpts" ng-model="apptStatus"></select>
<div class="custom dropdown">
<a href="#" class="current">Appointment Status</a>
<a href="#" class="selector"></a>
<ul>
<li ng-repeat="o in apptStatusOpts">{{o.label}}</li>
</ul>
</div>
javascript
$("#customDropdown").trigger('change');
$("#customDropdown a.current").trigger('click');
$("#customDropdown li.selected").trigger('click');
Also note, Foundation 3 is what I was working with. not sure if anything changed in the recently release Foundation 4 yet.