Question

这两个网址指向除了一件事情之外的相同文件：

mobileCSS.html

noCSS.html

mobileCSS.html文件包含以下行：

<link rel="stylesheet" href="/code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.css">

noCSS.html文件的注释行相同：

两个页面都使用AngularJS填充两个<select>元素，其中一个元素充当另一个元素的从属元素。两者都包含一组复选框，用于显示模型的内部状态。

使用jquery.mobile-1.4.3.css时：

不显示<select>元素的初始值
复选框输入不会更新

这是一个已知问题吗？你能为此建议一个解决方法吗？

部分解决方案：correctedCSS.html

这表明jQueryMobile没有正确更新，并且它添加的装饰隐藏了AngularJS正确更新<select>和<checkbox>元素的事实： < / p>

.ui-checkbox .ui-btn {
z-index:0; /* in jquery.mobile-1.4.3.css, this is set to 2 */
}

.ui-select .ui-btn select {
opacity:1; /* in jquery.mobile-1.4.3.css, this is set to 0 */
}

Screenshots http://dev.lexogram.com/tests/angularJS/angularVSjqueryMobile.png

Answer 1

我不是很擅长棱角分明，因为我也处于学习阶段，但据我所知，下面的代码可以提供帮助。

JS
$scope.endonyms = [{code: "en", name: "English" }, { code: "fr", name: "FranÃ§ais" }];
$scope.selectedOption = $scope.endonyms[2];
HTML:
<select ng-options="endonym as endonym.name for endonym in endonyms"
            ng-change="setSource()" ng-model="selectedOption">

Answer 2

解决方案是@Omar建议的：

你需要刷新复选框$（元素）.checkboxradio（“刷新”）和selectmenus $（元素）.selectmenu（“刷新”）动态更新它们的值

然而，时机是一个重要问题。首次创建AngularJS控制器时，尚未创建jQueryMobile装饰元素，因此无法刷新它们。此外，当AngularJS更改$ scope属性的值时，相应的DOM元素不会立即更新，因此在下一行中调用"refresh"是没有意义的。

// Delay initial "refresh" until the page is ready
$(function () {
  $("#source").selectmenu("refresh");
  $("#target").selectmenu("refresh");
  $("input[type='checkbox']").checkboxradio("refresh");
})

// Wait 1 millisecond before refreshing an item whose $scope property has been changed
function refreshChangedItems() {
  window.setTimeout(function () {
    $("input[type='checkbox']").checkboxradio("refresh");
    $("#target").selectmenu("refresh");
 }, 1)
}

您可以在solutionCSS.html

中找到这些修补程序

jQueryMobile的CSS打破了AngularJS

2 个答案: