opitzconsulting / jquery-mobile-angular-adapter Goto Github PK

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.

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.

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

http://jsfiddle.net/gscottolson/ndPaF/

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

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;
            }
        }

    }
}

}]);

Hi,
links in lists appear sometimes blue and sometimes not:

1. Clear the browser cache and visit the page below for the first time: The link appears in black text color.
2. Click on the link and reload the page: The link appears in blue color.
3. Click on the link and do not reload the page: A new link is added to the list (as intended), but the link is again in black text color.
4. In contrast: If the list is built without ng:repeat, the link always appears in black text color.

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,
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.

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

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';

Hi,
a call to $waitDialog.waitFor(promise, 'someMessage') always shows the default jquery mobile wait message and ignores the second argument.

Tobias

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')

http://jsfiddle.net/UF3dv/

Throws a "SyntaxError: Unexpected token c"

I haven't been able to get any syntax for ngm-event working.

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.

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.

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!

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

http://jsfiddle.net/gscottolson/jQjWL/

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']);
        }
    });
});

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

http://jsfiddle.net/nKGWD/3/

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

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.

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.

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).

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.

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> 

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.

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

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

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:

• A controller is created (TestController) which has an ItemCollection which will be used for feeding a jQM ListView.
• Another field of this controller is called IDItemEditable. This field will be used as the condition in the ngm-if for putting a row in edit mode when it is clicked.
• Initially IDItemEditable is null, causing that only content for read-only items is added to the DOM. These entries are enhanced by jQM as expected.
• When one row is clicked, condition changes removing read-only items and adding content for editing the row
  • Expected result: New shown content is jQM enhanced.
  • Obtained result: New shown content is not jQM enhanced, rendering as normal HTML.
• When save button is clicked, condition changes again inverting condition
  • Expected result: Rendering of new content enhanced again by jQM.
  • Obtained result: New shown content is not jQM enhanced again.

I suppose that a refresh method is missing somewhere.

Software versions used:

• jQuery Mobile 1.1.0-rc2
• jQuery 1.7.1
• Angular JS 1.0.0-rc4
• jQuery Mobile Angular Adapter 1.0.7-rc1

Best regards.

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.

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,

Firstly, thank you very much for this useful project!

I wanted to point out that, for now, $navigate accepts a single argument in the form ´[transition]:pageId´. It would be great to split this argument into two, the first one still being the pageId and the second one being of the same type of object that $.mobile.changePage accepts as a second 'options' argument, so that we can specify the 'reverse' attribute, the 'role', the 'reloadPage', etc. (as all listed here: http://jquerymobile.com/demos/1.0/docs/api/methods.html).
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

I must be missing something. $navigate is undefined. Any idea what might cause this?

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.

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,
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,
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).

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

Hi,
using

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.

Hi,
when using the current version of the adapter, the $xhr service is no more working.

Tobias

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.:

• {{item}}
• Load more

When I click on the button, the last entry updates it's data, however the jquery mobile list entry style is not updated.

Tobias

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.

Values of inputs of type date are not correctly bound to model properties. Tested on iOS 5.

There should be two builds:

1. A build that creates one js file that does not need any other library, uses the javascript module pattern and global variables. This should be usable in the same place as the current implementation
2. A build that create one js file that represents a require-js module. All services of the adapter should not more be exposed as global variables but as a requirejs module.