Question

我有以下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!');
};

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

但是当我用{strong> jQuery UI Selectmenu：

绑定我的select时

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

事件之后ng-change不再发生火灾。

在应用display: none后，您认为此行为与selecmenu样式有何关联？

Answer 1

当您调用.selectmenu()方法时，隐藏原始<select>（display:none），并生成一个包含<ul>和<li>的全新树。< / p>

例如，在SelectMenu的 JQuery UI 演示页面上，您可以激活浏览器的开发工具箱，然后查看此基础资源：

1：原始＆lt; SELECT＆gt;，现已隐藏

<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无法在这种条件下工作。

致以最诚挚的问候，

在jQuery UI Selectmenu之后选择不激活的AngularJS ng-change事件

1 个答案: