2

Angularパーシャル内でZrubFoundationドロップダウンボタンを使用すると、一見問題ないように見えますが、クリックして選択肢を表示すると、表示されません。ホバーしてクリックしたときのボタンの色は、必要に応じて変更されます。リストアイテムが表示されないだけです。

コンソールにエラーはありません。また、ボタンコードをindex.htmlに直接配置すると、ドロップダウンの動作は正常に機能します。

ドロップダウンボタンをパーシャル内で機能させる方法についてのアイデアはありますか？

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>
4

1 に答える 1

0

私の回避策changeは、select要素でトリガーし、次にclickアンカー要素とlist要素でトリガーすることでした。

これは基本的に、選択された要素として設定されているものを考慮して、ドロップダウン要素を適切に表示するように初期化します。

パーシャル内にあるリビールモーダル内にドロップダウンがあります。私の場合、モーダルをアクティブにする前に要素を初期化します。

マークアップ

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

また、Foundation3は私が使用していたものであることに注意してください。最近リリースされたFoundation4で何か変更があったかどうかはまだわかりません。

于 2013-03-06T15:30:02.707 に答える