当我使用Zrub基金会的下拉按钮内的角部分，他们在看第一眼OK，但却当您单击显示的选择，它们不会显示。悬停在钮的颜色，然后单击改变，因为他们应该，它只是列表项不显示。

有在控制台没有错误。另外，如果我直接把按钮code index.html中，下拉行为正常工作。

如何让内部部分的下拉按钮的工作任何想法？

app.js

 使用严格的;angular.module（'的myapp'，['myappFilters'，'myappServices']）。  配置（['$ routeProvider'，函数（$ routeProvider）{  $ routeProvider。      当（'/测试'，{templateUrl：'谐音/ test.html的'，控制器：EnvListCtrl}）。}]）; 

的test.html

 ＆LT; D​​IV HREF =＃类=中的下拉按钮，全宽＆GT;  下拉按钮＆放大器; NBSP;  ＆LT; UL＆GT;    ＆LT;立GT;＆LT; A HREF =＃＆GT;选择1＆LT; / A＆GT;＆LT; /李＆GT;    ＆LT;李班=分水岭＆GT;＆LT; /李＆GT;    ＆LT;立GT;＆LT; A HREF =＃＆GT;选择2'; / A＆GT;＆LT; /李＆GT;    ＆LT;立GT;＆LT; A HREF =＃＆GT;选择3'; / A＆GT;＆LT; /李＆GT;  ＆LT; / UL＆GT;＆LT; / DIV＆GT; 

解决方案

我的解决方法是触发更改 select元素，然后点击的锚和列表元素。

这基本上初始化下拉元件与考虑到任何被设定为所选择的元件正确显示。

我有一个显示模式，这里面的部分里面的下拉列表。就我而言，我在激活模式之前初始化的元素。

标记

JavaScript的

另外请注意，基金会3是我与合作。不知道如果有什么改变在近期发布基金4呢。

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 &nbsp;
  <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.