Question

我有这个HTML：

<div ng-switch on="MyViewType">
  <div ng-switch-when="B">
    <select id="selectCatagoryFood2" data-role="listview" data-native-menu="true" ng-options="foodCatagory as foodCatagory.Description for foodCatagory in foodCatagories" ng-model="foodCatagory" ng-change="changeFoodCatagory(foodCatagory)">
    </select>
  </div>
</div>

如果选择其他值，则选择显示为空并且不执行任何操作。

示例（第一个“选择”正常，但第二个没有显示选定值）：http://plnkr.co/edit/yrXa70?p=preview

问题类似于其他帖子，但此解决方案不起作用（“刷新”启动异常）。

Select Value not Init in AngularJs and JQueryMobile

我认为问题在于这个指令（ng-switch）从DOM中删除并添加了元素，而JQuery Mobile丢失了在元素初始化中创建的一些对象。

Answer 1

您示例中的代码：

var unbindWatcher = scope.$watch(attrs.ngModel, function(newValue, oldValue) {
        if (newValue && oldValue === undefined) {
          element.selectmenu('refresh');
          unbindWatcher();
        }
      });

当element.selectmenu('refresh');（选择的选项）获得新值并且旧值未定义时，将调用ngModel。

这适用于第一个选择，因为它将：

首先通过jQuery Mobile
稍后获取新数据并刷新

但是，在第二种情况下，在<div ng-switch-when="B">实际为MyViewType之前，B内的HTML不会呈现，这与选择的数据准备就绪的同时。

这意味着两件事：

当$watch的代码被执行后，ngModel已经可用，newValue和oldValue都将{{1} }}，Object {Description: "1"}将不会被执行。
如果您试图致电if statement，它会抛出一个错误，因为该元素尚未初始化为a 通过jQuery Mobile选择菜单。

如果您想使用element.selectmenu('refresh');中的数据填充选择菜单，并且数据在初始化时可用，我会：

通过设置$scope
通过从指令

data-role="none"

否则你需要一个很好的方法来知道元素何时被jQuery Mobile渲染和初始化，然后调用refresh。

两种情况的修改指令：

element.selectmenu();

工作示例：http://plnkr.co/edit/9jR7ko3j8ugUr1suB8ws?p=preview

请注意，var unbindInitializationWatch = scope.$watch(attrs.ngModel, function(newValue, oldValue) { if (newValue && oldValue === undefined) { element.selectmenu('refresh'); unbindInitializationWatch(); } else if (newValue && oldValue) { element.selectmenu(); unbindInitializationWatch(); } });会创建一个新范围，并且为了让两个选择菜单共享我在示例中选择的选项，将所选选项的模型移动到一个对象中（详情请参阅{{3}如果不熟悉它的工作方式）。

还添加了额外的ngSwitch来同步两个选择菜单。

JQueryMobile选择元素在AngularJs ng-switch指令中不起作用

1 个答案: