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

虽然一切都很好。事件被触发。

但是当我select用jQuery UI Selectmenu 绑定我时：

$('.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 回答