javascript - Angular.js 模板没有获取文档 css

Question

我有两个填充 ng-view 的模板，但它们不继承文档 css。有没有办法让css工作？我在 jquery 移动页面中使用它，并希望重复列表具有 jquery 移动 ui。

Answer 1

ng-view简单地将 HTML 附加到当前 DOM；应用于页面的 CSS 将正确影响它。更有可能的是，jQuery Mobile UI 做了一些添加 HTML 时不会发生的 JavaScript 魔法。

例如，浏览一下Listviews 上的文档会出现以下方法：

refresh- 更新列表视图

如果您通过 JavaScript 操作列表视图（例如添加新的 LI 元素），您必须在其上调用 refresh 方法来更新视觉样式。

$('.selector').listview('refresh');

“List basics & API”底部还有一个部分：

更新列表

如果将项目添加到列表视图，则需要对其调用 refresh() 方法来更新样式并创建添加的任何嵌套列表。例如：

$('#mylist').listview('refresh');

请注意，该refresh()方法仅影响附加到列表的新节点。这样做是出于性能原因。刷新过程将忽略任何已增强的列表项。这意味着如果您更改已经增强的列表项的内容或属性，这些将不会被反映。如果要更新列表项，请在调用刷新之前将其替换为新标记。

Answer 2

ng-view has a $viewContentLoaded event that is emitted when the ng-view content is reloaded. Try having a controller or directive scope (or even rootScope) listen for that event and reapply/refresh as @Brandon mentions.

See also Jquery calls not working in $viewContentLoaded of Angular and
angular.js: equivalent of domReady - maybe you can just call the reapply/refresh stuff at the bottom of each main controller in your view (no need for $viewContentLoaded here).