jQueryMobile的CSS打破了AngularJS(CSS for jQueryMobile breaks AngularJS)

jQueryMobile的CSS打破了AngularJS(CSS for jQueryMobile breaks AngularJS)

这两个URL指向除一件事之外相同的文件：

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文件具有注释掉的相同行：

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

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

使用jquery.mobile-1.4.3.css ：

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

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

部分解决方案： correctCSS.html

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

.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 */ }

截图http://dev.lexogram.com/tests/angularJS/angularVSjqueryMobile.png

These two URLs point to files which are identical except for one thing:

mobileCSS.html

noCSS.html

The mobileCSS.html file contains this line:

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

The noCSS.html file has the same line commented out:

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

Both pages use AngularJS to populate two <select> elements, one of which acts as a slave to the other. Both also contain a set of checkboxes to show the internal state of the model.

When jquery.mobile-1.4.3.css is used:

The initial values of the <select> elements are not displayed The checkbox inputs do not update

Is this a known issue? Can you suggest a workaround for this?

Partial solution: correctedCSS.html

This reveals that jQueryMobile is not correctly updating, and that the decorations it adds hide the fact that the <select> and <checkbox> elements are being correctly updated by AngularJS:

.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

最满意答案

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

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">

The solution is as @Omar suggested:

you need to refresh checkboxes $(element).checkboxradio("refresh") and selectmenus $(element).selectmenu("refresh") after updating their values dynamically

However, timing is an important issue. When the AngularJS controller is first created, the jQueryMobile decorative elements have not yet been created, so they cannot be refreshed. Also, when AngularJS changes the value of a $scope property, the corresponding DOM element is not immediately updated, so calling "refresh" in the next line is pointless.

// 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) }

You can find these fixes in solutionCSS.html