I have two templates that populate ng-view, but they don't inherit the document css. Is there a way to get the css to work? I am using this in a jquery mobile page and want the repeat list to have jquery mobile ui.
-
this is really annoying!!! i am also facing same problemArshabh Agarwal– Arshabh Agarwal2013-02-15 19:38:04 +00:00Commented Feb 15, 2013 at 19:38
Add a comment
|
2 Answers
ng-view simply attaches the HTML to the current DOM; CSS applied to the page will affect it correctly. More likely, jQuery Mobile UI does some JavaScript magic that's not happening when the HTML is added.
For instance, a glance through the documentation on Listviews brings up the following method:
refresh- update the listviewIf you manipulate a listview via JavaScript (e.g. add new LI elements), you must call the refresh method on it to update the visual styling.
$('.selector').listview('refresh');
There's also a section at the bottom of "List basics & API":
Updating lists
If you add items to a listview, you'll need to call the refresh() method on it to update the styles and create any nested lists that are added. For example:
$('#mylist').listview('refresh');Note that the
refresh()method only affects new nodes appended to a list. This is done for performance reasons. Any list items already enhanced will be ignored by the refresh process. This means that if you change the contents or attributes on an already enhanced list item, these won't be reflected. If you want a list item to be updated, replace it with fresh markup before calling refresh.
2 Comments
bradrice
That is helpful, but I don't see how or where to apply that using an Angular directive. When would I call that?
Michelle Tilley
Well in this case, you'd need to refresh the widget any time the data driving the UI inside the
ng-view changes--so you'd have to set up a $watch manually. Thankfully, someone's already gone through the trouble of integrating Angular with jQuery Mobile: github.com/tigbro/jquery-mobile-angular-adapterng-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).
