jQueryMobile 的 CSS 破坏了 AngularJS

标签 css angularjs jquery-mobile

这两个 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> 的初始值元素不显示
  • 复选框输入不更新

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

部分解决方案:correctedCSS.html

这表明 jQueryMobile 没有正确更新,并且它添加的修饰隐藏了 <select> 的事实和 <checkbox> 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

最佳答案

我不太擅长 Angular ,因为我也处于学习阶段,但据我所知,像下面的代码这样的东西可以提供帮助。

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

关于jQueryMobile 的 CSS 破坏了 AngularJS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24930153/

相关文章:

javascript - 将纬度、经度转换为 iframe 链接

css - div 中的居中元素

javascript - jQuery 中的水平选择 slider

html - 如何将列表项中的文本和子行居中?

javascript - 链接函数中的 $scope.watch()

jquery - 使用 JQuery/JQM 动态创建复选框时保留 CSS

javascript - 删除选项后选择菜单无法正确显示 - jQuery mobile

javascript - 错误消息工具提示不可见

css - 水平对齐下拉菜单的子菜单

angularjs - ng-change on select 选项调用多个独特的功能