opitzconsulting / jquery-mobile-angular-adapter Goto Github PK
View Code? Open in Web Editor NEWjquery mobile angular adapter
License: MIT License
jquery mobile angular adapter
License: MIT License
I can't get <textarea> elements to render for a jQM page. It seems the failure is in the adapter, line 22400
cannot call methods on textinput prior to initialization; attempted to call method 'enable'
Here is a jsFiddle showing this error: http://jsfiddle.net/gscottolson/d967J/
Hi,
Given page-size 10, and a list with 11 entries, followed by a "load next page" button that also uses a "li" tag.
E.g.:
When I click on the button, the last entry updates it's data, however the jquery mobile list entry style is not updated.
Tobias
Hi,
using
Tobias
There's a bug on nested collapsibles.
Please, run this code:
<head>
<title>jQuery Mobile Angular Adapter</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css">
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script src="http://code.angularjs.org/1.0.1/angular-1.0.1.min.js"></script>
<script src="https://raw.github.com/tigbro/jquery-mobile-angular-adapter/master/compiled/min/jquery-mobile-angular-adapter-1.1.0.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>jQuery Mobile Angular Adapter</h1>
</div>
<div data-role="content">
<div data-role="collapsible">
<h3>Hello</h3>
<p>World</p>
<div data-role="collapsible">
<h3>Foo</h3>
<p>Bar</p>
</div>
</div>
</div>
</div>
</body>
Some phones running android have a very poor performance, especially regarding the DOM (javascript is not the real problem...). For those phones it would be great to show a warning dialog when the application starts that the performance might be bad...
I've seen in your readme that the ng-app directive is required and that the usage of manual bootstrap of angular does not work well with jquery-mobile, as jquery-mobile relies on the jQuery ready event to be fired at the right time.
However, it has worked so far with the former rc3-SNAPSHOT and rc2. No it seems that the current rc3-SNAPSHOT with manual initialization of AngularJS (http://docs.angularjs.org/guide/bootstrap) is no longer working. I have provided a jsFiddle which shows the problem: http://jsfiddle.net/jupiter/rJvPG/.
In Firefox the following error message is shown:
[Exception... "Node cannot be inserted at the specified point in the hierarchy" code: "3" nsresult: "0x80530003 (HierarchyRequestError)" location: "https://github.com/tigbro/jquery-mobile-angular-adapter/raw/master/compiled/jquery-mobile-angular-adapter-1.0.7-rc3-SNAPSHOT.js Line: 275"]
In Chrome a similar error message is displayed:
Error: HIERARCHY_REQUEST_ERR: DOM Exception 3
Error: A Node was inserted somewhere it doesn't belong.
at connectToDocument (https://raw.github.com/tigbro/jquery-mobile-angular-adapter/master/compiled/jquery-mobile-angular-adapter-1.0.7-rc3-SNAPSHOT.js:275:38)
I use manual initialization because I use a script loader to conditionally load AngularJS modules and other code before I bootstrap the application.
If you do not plan to support manual initialization what could be an alternative to defer the AngularJS bootstrapping so that conditional loading can take place? I specifically use this in order to load the correct language files.
My current code looks something like this:
angular.element(document).ready(function() {
var locale = localStorage.getItem('locale');
var url = 'i18n/angular-locale_'+locale+'.js';
yepnope({
load: url,
callback: function(url, result, key) {
angular.bootstrap(document,['myapp']);
}
});
});
Here's another issue I ran into:
http://jsfiddle.net/gscottolson/K9XuT/
I'm including a search input and a button via a templateUrl. The button is enhanced, but the search field is not. An in-page version of the same set of components is enhanced correctly.
When I render an inset listview using the ng-repeat directive, the resulting listview does not have properly rounded corners.
http://jsfiddle.net/gscottolson/Lfg5u/
Note: in the jsFiddle... if you remove a tag (by clicking) the listview is re-rendered with properly rounded corners.
Here is an example I threw together using the todo app:
http://jsfiddle.net/AecvK/
You will notice that the first two items in the list are static and are styled correctly. The rest of the items are generated by angular and do not get the jqmobile styles..
Here is the working example using adapter version 1.0.4:
http://jsfiddle.net/HYhkX/
Glad to see the update to jqm 1.0.1 so quickly. .
Thanks!
Thanks for all the bug fixes. I really appreciate it!
Unfortunately, the fix for bug #32 doesn't solve the case where the controlgroup is dynamically added via a directive with a templateUrl. The following jsFiddle shows this defect:
http://jsfiddle.net/gscottolson/aDBz5/
Not only are the buttons ungrouped, but the data-type="horizontal" attribute is not being applied.
When I set the model for a checkbox to true, the checkbox does not get checked on the view.
Here is what a stripped down example of what I am trying to do: http://jsfiddle.net/andytjoslin/qz7bQ/1/
Where in the jqm-adapter code is the checkbox directive? I'd take a look at it, but I can't find it.
I must be missing something. $navigate is undefined. Any idea what might cause this?
This is the most hard to explain problem I had with rc2. I have a directive which I use to replace text with translations. In the jsFiddle http://jsfiddle.net/jupiter/hUtqV/5/ I have called this directive replace. The directive replaces attribute values with
<input type="button" replace="value" value="replace me" />
or the HTML element's text as in
<div replace>replace me</div>.
The el.text() which replaces the text breaks the rendering of the radio buttons if I have the replace directive in the enclosing div to replace the page title and at the same time in the radio button to replace the radio buttons text.
If I either remove replace="data-title" of the page element, the replace of the radio button or change jquery-mobile-angular-adapter-1.0.7-rc2.js to jquery-mobile-angular-adapter-1.0.7-rc1.js it works.
The button in the footer is always broken with the replace directive.
I have used jquery mobile 1.1.0 and AngularJS 1.0.0rc9.
Throws a "SyntaxError: Unexpected token c"
I haven't been able to get any syntax for ngm-event working.
I'm following angular's recommended pattern of using the value and ng-model attributes for radio buttons. However, the default radio button (based on the value of the property assigned to ng-model) does not get checked. See the jsfiddle...
Create a "Edit in jsFiddle" for the phonecat-mobile and todo-mobile applications.
See http://fiddle.jshell.net/zalun/sthmj/show/light/ and http://doc.jsfiddle.net/api/post.html on the details.
Also create a sample jsFiddle that loads the basic libraries with a sample first page.
See here: http://jsfiddle.net/mhevery/7nzZv/2/
Tobias
Values of inputs of type date are not correctly bound to model properties. Tested on iOS 5.
Hi,
when I use ng:validate the error feedback is the same as in the desktop version of angular: A popup that does not match mobile design guidelines.
Tobias
Hi,
when using ng:switch widgets contained in the ng:when child elements are not styled when the switch clause changes.
See here: http://jsfiddle.net/2aUNu/1/
Same applies probably to ng:include (no fiddle).
As you can see from this demo I put together, the two items in the controller list are displayed 4 times in the table created from an ng-repeat directive.
This is using the latest precompiled version (jquery-mobile-angular-adapter-standalone-1.0.7-rc3-SNAPSHOT.js), since I don't have everything set up to build myself.
Hi,
there is a problem when using the adapter in version 1.0.2 with windows phone 7:
German: "Die type Eigenschaft wurde nicht gefunden, dieser Befehl wird nicht unterstützt"
(English: "The type property was not found, the command is not supported").
In line 1130 of jquery-mobile-angular-adapter-1.0.2.js
...
proxyUtil.createAngularWidgetProxy('input', function(element) {
...
1129: if (isTextinput) {
1130: element[0].type = 'text';
I want to be able to generate new pages dynamically from model data.
Here is a minimal fiddle: http://jsfiddle.net/petebd/6DAZE/1/
Any idea how to get this working?
Thanks,
Pete
I'm using a directive with an ng-model on it, but it is not updating the dom or the value when I update it. From below, I can change the ng-model to text or leave it with the huge parent expression, but neither seems to work.
Insight.module.directive('text', [function() {
return {
restrict: 'E',
scope: {
parameter: 'accessor'
},
template: '',
replace: true,
compile: function () {
return function (scope, element, attrs) {
var control = scope.parameter();
if (control.DefaultValues && control.DefaultValues.length) {
control.Value = control.DefaultValues[0];
scope.text = control.Value;
}
}
}
}
}]);
A button with or does not get styled correctly with the jquery mobile styles, when the button is not shown initially but then shown later (e.g. due to the condition being false in ngm:if or the collection being empty in ng:repeat).
Grouped buttons (both horizontal and vertical) are not rendering correctly in 1.0.7 rc2. They are rendering correctly in 1.0.7 rc1.
Adapter 1.0.7 RC1: http://jsfiddle.net/gscottolson/tzVGj/
Adapter 1.0.7 RC2: http://jsfiddle.net/gscottolson/Lf6Lh/
Also... RC1 has no hover/active state, but RC2 does.
I have defined a custom namespace for data-attributes (http://jquerymobile.com/test/docs/api/globalconfig.html) by binding to the mobileinit event in order to use e. g. data-jqm-role instead of data-role. With rc2 all namespaced data-attributes don't seem to be recognized.
See the jsFiddle at http://jsfiddle.net/jupiter/bmBHN/4/.
Change jquery-mobile-angular-adapter-1.0.7-rc2.js to jquery-mobile-angular-adapter-1.0.7-rc1.js to see it work with rc1.
I have used jquery mobile 1.1.0 and AngularJS 1.0.0rc9.
If I use ngm-if e.g. for displaying a message like so:
<div class="error" ngm-if="rental.errorMessage">{{rental.errorMessage}}</div>
And I first set rental.errorMessage
to abc
and then to def
both messages are visible.
Tobias
I have inserted two pairs of divs. One pair before the page and another pair after the page. Both divs cause the rendering to break. The first pair of divs causes the rendering of the button's disabled state to break and the second div causes the rendering of the radio buttons to break.
I use divs this way e. g. for application wide overlays.
See the jsFiddle at http://jsfiddle.net/jupiter/kk7K9/2/.
Change jquery-mobile-angular-adapter-1.0.7-rc2.js to jquery-mobile-angular-adapter-1.0.7-rc1.js to see it work with rc1 or comment or delete the two divs to see it work in rc2.
I have used jquery mobile 1.1.0 and AngularJS 1.0.0rc9.
I am using AngularJS 1.0.0rc8, jQuery mobile 1.2.0 Pre and jQuery mobile Angular adapter 1.0.7-rc1.
I have used the following line of HTML-code:
<input type="button" ng-disabled="someexpression" value="Some title"></input>
However, the button is not disabled when someexpression is true.
I have tracked this down in the code. Here is an extract of the code which seems to not work correctly:
jqmng.define('jqmng/widgets/disabledHandling', ['jquery', 'angular'], function ($, angular) {
var mod = angular.module('ng');
function instrumentAttrSetter(element, attr) {
// ...
attr.$set = function (key, value) {
var res = _$set.apply(this, arguments);
if (key === 'disabled') {
var jqmOperation = 'enable';
if (value === 'disabled' || value == 'true') {
jqmOperation = 'disable';
}
// ..
The jqmOperation is set to disabled if value is 'disabled' or 'true'. Unfortunately, the function is invoked with a boolean value true not a string value 'true'.
To test this assumption I have just added a value == true as in
if (value === 'disabled' || value == 'true' || value == true) {
and now it works as intended. As I don't know how the frameworks actually work internally this is probably not the right way to fix it but it gives an idea of what is going wrong.
Attribute widget @ngm-if can be used for adding and removing elements from the DOM. An use case has been found in which element just added is not refreshed as jQM elements dynamically added need to, causing not enhanced elements to appear on screen.
The following example shows this effect:
http://jsfiddle.net/LucasG2000/Ev4AN/
This is the structure of the example and how to reproduce it:
I suppose that a refresh method is missing somewhere.
Software versions used:
Best regards.
I think I finally figured it out. I'm using ng-repeat to generate the buttons within the data-role="controlgroup" element. The buttons are rendered separately instead of as a group.
Hello,
Thank you for a great adapter, I have started using it for a couple of things.
One issue I was having with is using the slider in jquery mobile
It updates the model when I adjust the text field, but does not update with the slider.
Does anyone have a way to fix this?
Thanks and regards
Brendan
For example, say you have 2 sets of images on a page. One that is
rendered normally, eg
<img src="alpha.jpg">
And another set that is rendered by ng-repeat: eg.
<ul ng-repeat="member in family_members">
<li>
<img src="{{ member.image }}">
<h3>{{ member.name }}</h3>
<p>{{ member.relationship }}</p>
</li>
</ul>
I have observed that
<img src="alpha.jpg">
and the text {{ member.name }} and {{ member.relationship }} are already present on the page as the page gets loaded. However, the images,
<img src="{{ member.image }}">
take a short while (probably in the range of less than a second but still discernible) to load. This does not happen in the desktop browser but happens for me in my phonegap app.
Here is the way to reproduce the issue on an iPad. Should work on iPhone as well.
1st load http://hackerspacesg.valcatohosted.com/jqm-angular and click on the big button 'Go to home' to cache the images at http://hackerspacesg.valcatohosted.com/jqm-angular/home.html
For a quick and dirty simulation of an embedded web view, similar to PhoneGap (same rendering deal, minus phone gap.js), go to http://hackerspacesg.valcatohosted.com/jqm-angular , save it to your home screen in iOS, then open it and browse the site. The issue that I reported should be reproduced.
Hi,
links in lists appear sometimes blue and sometimes not:
Note for 3: Internally, the first a-tag gets an ui-link css class, but the second does not.
<div data-role="page" id="start" ng:init="data = {mylist:[1]}">
<div data-role="content">
<ul data-role="listview" id="list">
<li ng:repeat="l in data.mylist">
<a href="#test2" ng:click="data.mylist=[1,2]">Test
</a>
</li>
</ul>
</div>
</div>
Hi,
if I create a template directive (a directive with a html property) that contains a checkbox,
and use that directive in an ng-repeat, the checkbox does not get enhanced.
See here: http://jsfiddle.net/9GL5x/22/
Tobias
Hi,
Following is my code snippet:
http://jsfiddle.net/asu_fiddle/pxBPL/1/
However when I execute this, the model (basically uname) gets chaged once I cahnge the focus out of name field, please let me know what I am missing in the HTML file.
Thanks in advance
Asutosh
Hi,
it would be nice if the following were possible:
Call $activePage service, with an argument. When the page is changed, that argument should be given to the onActivate callback of the selected page.
Would also be nice to save that object in the url / hash, so the new page gets bookmarkable / refreshable...
Benefits:
The pages are decoupled: The new page does not need to know who called that page / introspect the calling scope.
The 1.0.6 version works when loaded from of index.html, but when loading with require.js, I get this:
Uncaught TypeError: Cannot set property 'globalScope' of undefined (line 27706)
GET http://localhost:1234/adaptertest/jquery.js 404 (Not Found)
Uncaught Error: Load timeout for modules: jquery
http://requirejs.org/docs/errors.html#timeout
I just added 1.0.7-rc2-SNAPSHOT to my project. It resolves a couple issues I was having, but it introduces another issue:
I have a few directives that include template files via the templateUrl property. Any jQuery Mobile markup within these templates (like a <div data-role="navbar" > element with a nested ;<ul>) is not converted into a jQuery Mobile widget. Instead, this content appears as a regular unstyled unordered list.
There is workaround for this issue. If I use the template property for the directives (instead of using templateUrl), the jQuery Mobile markup is correctly converted to the appropriate jQuery Mobile widget (in the above case, the data-role="navbar" element correctly renders as a jQuery Mobile navbar.
This isn't a huge issue, but it means I have to use embedded templates with my directives. Also, the 1.0.7-rc1 version of this adapter worked with the templateUrl property in my directives. This issues seems to be related to the rc2 changes.
This jQuery Mobile checkbox is bound is to ng-model value, but expressions using that model value are not evaluated unless they are outside the jQuery Mobile widget (in this case, the fieldset). Other references within the page are updating correctly. See this fiddle:
http://jsfiddle.net/gscottolson/hEegk/
The following message appears in the browser JavaScript console: 'undefined' is not an object (evaluating 'node[0].nodeValue = value')
Hi,
Firstly, thank you very much for this useful project!
I wanted to point out that, for now,
It would be more coherent to the original jQueryMobile capabilities, though still easily adaptable to a different library (like Sensa Touch). The 'back' transition can still be handled if set in the 'transition' attribute of this second argument.
Thanks in advance,
MisterK
Hi,
when using the current version of the adapter, the $xhr service is no more working.
Tobias
I am not sure if this is a designed trade-off, but the (patched) $location service doesn't like to be injected into a controller.
For example, change the controller def of the 'todo-mobile' example, as such:
line 2:
-- module.factory('todoStore', function ($http, $waitDialog) {
++module.factory('todoStore', function ($http, $waitDialog, $location) {
Navigate to /todo.html#settings, reload the page and see window.location go haywire.
There should be two builds:
Hi,
a call to $waitDialog.waitFor(promise, 'someMessage') always shows the default jquery mobile wait message and ignores the second argument.
Tobias
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.