2

当我在 Angular 部分中使用 Zrub Foundation 下拉按钮时，乍一看它们看起来不错，但是当您单击以显示选项时，它们不会显示。悬停时按钮的颜色并单击更改，只是列表项不显示。

控制台中没有错误。此外，如果我将按钮代码直接放在 index.html 中，则下拉行为可以正常工作。

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

应用程序.js

'use strict';
angular.module('myapp', ['myappFilters', 'myappServices']).
  config(['$routeProvider', function($routeProvider) {
  $routeProvider.
      when('/test', {templateUrl: 'partials/test.html',   controller: EnvListCtrl}).
}]);

测试.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>
4

1 回答 1

0

我的解决方法是change在选择元素上触发，然后click在锚点和列表元素上触发。

这实质上初始化下拉元素以正确显示，同时考虑到设置为选定元素的任何内容。

我有一个显示模式内的下拉菜单，它位于一个部分内。就我而言，我在激活模态之前初始化元素。

标记

<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');

另请注意，Foundation 3 是我正在使用的。不确定最近发布的 Foundation 4 是否有任何变化。

于 2013-03-06T15:30:02.707 回答