1

VIEW コードの次の部分があります。

<select class="my_select_class" id="my_select_id" name="my_select_name" ng-model="my_select_model" ng-change="my_func()">
    <option value="val1">val1</option>
    <option value="val2">val2</option>
</select>

また、私には私の機能があります

    $scope.my_func() = function () {
        console.log('Fire!');
};

すべてが問題ありませんが。イベントがトリガーされます。

しかし、jQuery UI Selectmenu でバインドすると、次のようになりますselect。

$('.my_select_class').selectmenu({ style: 'new_style' });

そのイベントng-changeの後、もう発火しません。

この動作は、適用display: none後のスタイルとどのように関連していると思いますか?selecmenu

4

1 に答える 1

1

メソッドを呼び出す.selectmenu()と、オリジナル<select>は非表示 ( ) になり、とdisplay:noneの付いた新しいツリーが生成されます。<ul><li>

たとえば、 SelectMenuのJQuery UIデモ ページでは、ブラウザの開発者ツールボックスをアクティブにして、次の基本的なソースを表示できます。

1: 元の <SELECT>、現在は非表示

<select name="speed" id="speed" style="display: none;">
    <option>Slower</option>
    <option>Slow</option>
    <option selected="selected">Medium</option>
    <option>Fast</option>
    <option>Faster</option>
</select>

2: JQuery UI によって生成されたコード

<div class="ui-selectmenu-menu ui-front" style="top: 78.5px; left: 17.5px;">
    <ul aria-hidden="true" aria-labelledby="speed-button" id="speed-menu" class="ui-menu ui-widget ui-widget-content ui-corner-bottom" role="listbox" tabindex="0" aria-activedescendant="ui-id-1" aria-disabled="false" style="width: 198px;">
      <li class="ui-menu-item ui-state-focus" id="ui-id-1" tabindex="-1" role="option">Slower</li>
      <li class="ui-menu-item" id="ui-id-2" tabindex="-1" role="option">Slow</li>
      <li class="ui-menu-item" id="ui-id-3" tabindex="-1" role="option">Medium</li>
      <li class="ui-menu-item" id="ui-id-4" tabindex="-1" role="option">Fast</li>
      <li class="ui-menu-item" id="ui-id-5" tabindex="-1" role="option">Faster</li>
    </ul>
</div>

したがって、 , などのすべての添付ディレクティブはng-model、ng-change使用されなくなった DOM 要素に添付されます。その条件では AngularJS は動作しなかったようです。

よろしくお願いします、

于 2015-06-12T12:50:46.447 に答える