opitzconsulting / jquery-mobile-angular-adapter

jquery mobile angular adapter
MIT License
517 stars 114 forks source link

Examples for ngm-create or ngm-link? #120

Closed marcorinck closed 11 years ago

marcorinck commented 11 years ago

Hi Tobias,

are there any examples for ngm-create and ngm-link directives that are mentioned in the readme?

Currently I write a new directive for every jqm widget I want to use. But when I undertand the readme correctly ngm-create/ngm-link seem to be a general solution for every jwm widget, right?

How can I use them? I have already looked into the rylc-html5 training projects from a session by Stefan Scheidt I attended, but couldn't find any example for using these directives.

Thanks for your help!

Marco

tbosch commented 11 years ago

Hello Marco, do you have an example of what you want to accomplish, i.e. which jqm widget you want to be able to use in angular? The default directives should all work out of the box... the nqm-create and ngm-link directives are created automatically, if you specify that your widget is a jqm widget. For this, the adapter contains the function $.mobile.registerJqmNgWidget. Have a look at https://github.com/tigbro/jquery-mobile-angular-adapter/blob/master/src/main/webapp/integration/jqmAngularWidgets.js on how to use this function. You can register precompile, create and link handlers. A special precompile and create handler is needed if your widgets wraps the element it contains into a new element (e.g. like <button>, which wraps itself into a new <div>).

But if you could provide more details what you want to accomplish I could help you for implementing those handlers...

Tobias

marcorinck commented 11 years ago

Sorry, Tobias, I'll admit that maybe I misunderstood something. I'll try to explain what I want to achieve.

For example: I really would like to have a simple directive which renders a popup jqm widget. Currently I have already done somehting like that. a directive which renders a customizable (error) message and displays a retry link which calls a customizable controller function.

Like in this fiddle: http://jsfiddle.net/marcorinck/AWX6K/7/

I can use this in my project on every jqm page and it always displays the same popup with a customizable error message. Its very basic though and if you want to display more complex output in the popup a direcitve wouldn't be the right approach. But its very easy to use and reusable.

Now, I wanted to display an action menu which also uses popup but instead of text output it should display a certain set of action items which can change depending on the page where its used. To make it reusable I started again with a directive which looked very much the same like my linked popup. And I started to think if there is already a directive implemented into your adapter which I can use to create widgets on the fly in an angular directive.

And when I looked into your readme I stumpled upon a basic description of ngm-create/ngm-link which looked like I could dynamically created jqm widgets, but that is not the case apparently.

What do you think about my directive? Is there an easier approach maybe?

I know that I can write the jqm html directly but then its not really reusable when a certain menu/popup/whatever should be displayed on more than one page.

Thanks for your time and reading this :+1:

Marco

tbosch commented 11 years ago

Hi, sorry for the late reply. Your directive looks good, this is the way to go (plain angular directives). The set of action menu items could be realized using ng-repeat or ngm-if or ng-switch.

Please note that I will simplify the way to open/close a popup programmatically, see the tracker here: #122

Tobias