JQueryMobile select元素不在AngularJs ng开关指令内工作

我有这个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>

如果选择另一个值，则select将显示为空且不执行任何操作

示例（第一个“选择”功能正常，但第二个未显示选定值）：

这个问题与另一篇文章类似，但是这个解决方案不起作用（“刷新”会启动一个异常）

---

我认为问题在于此指令（ng开关）从DOM中删除和添加元素，而JQuery Mobile会丢失在元素初始化过程中创建的一些对象。

示例代码：

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

元素。选择菜单（“刷新”）ngModel（所选选项）获取新值且未定义旧值时，将调用code>

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

首先由jQuery Mobile渲染并初始化为选择菜单

稍后获取新数据并刷新

但是，在第二种情况下，

中的HTML在

MyViewType

实际为

B

时才会呈现，同时select的数据准备就绪

这意味着两件事：

当为该元素执行

$watch

中的代码时，

ngModel

将已经可用，

newValue

和

oldValue

都将是

对象{Description:“1”}

，而

if语句将不会执行

如果您试图调用

元素，请选择菜单（“刷新”）它会抛出
错误，因为元素尚未初始化为
通过jquerymobile选择菜单

如果您想用

$scope

中的数据填充选择菜单，并且数据在初始化时可用，我会：

通过设置

data role=“none”

通过调用

element.selectmenu（）手动进入选择菜单

否则，您需要一种好方法来知道jquerymobile何时呈现和初始化了元素，然后调用refresh

两种情况下的修改指令：

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

工作示例：

请注意，

ngSwitch

创建了一个新的作用域，为了让两个选择菜单共享所选选项，我在示例中将所选选项的模型移动到一个对象中（如果不熟悉其工作方式，请对此进行详细介绍）

---

还添加了一个额外的

$watch

以同步两个选择菜单。

示例代码：

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

元素。选择菜单（“刷新”）ngModel（所选选项）获取新值且未定义旧值时，将调用code>

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

首先由jQuery Mobile渲染并初始化为选择菜单

稍后获取新数据并刷新

但是，在第二种情况下，

中的HTML在

MyViewType

实际为

B

时才会呈现，同时select的数据准备就绪

这意味着两件事：

当为该元素执行

$watch

中的代码时，

ngModel

将已经可用，

newValue

和

oldValue

都将是

对象{Description:“1”}

，而

if语句将不会执行

如果您试图调用

元素，请选择菜单（“刷新”）它会抛出
错误，因为元素尚未初始化为
通过jquerymobile选择菜单

如果您想用

$scope

中的数据填充选择菜单，并且数据在初始化时可用，我会：

通过设置

data role=“none”

通过调用

element.selectmenu（）手动进入选择菜单

否则，您需要一种好方法来知道jquerymobile何时呈现和初始化了元素，然后调用refresh

两种情况下的修改指令：

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

工作示例：

请注意，

ngSwitch

创建了一个新的作用域，为了让两个选择菜单共享所选选项，我在示例中将所选选项的模型移动到一个对象中（如果不熟悉其工作方式，请对此进行详细介绍）

还添加了一个额外的

$watch

，以同步两个选择菜单