opitzconsulting / jquery-mobile-angular-adapter

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

Not an issue #151

Closed smatthews1999 closed 11 years ago

smatthews1999 commented 11 years ago

I just wanted to say thank you for such an excellent project!

... and mention an interesting feature that I have uncovered. It may not be interesting to you as you may be aware of it.. but for me is was a welcome discovery.

I have been writing a small project using Angular and JQM, and it became increasingly difficult to keep dynamic content looking right.. so I made the investment to move over to your adapter. As I was just only learning Angular and JQM it took me some time, but I'm glad I did. Your adapter handles all new dynamic content extremely well. The additional features and tags are also very helpful.

In one part of my code I am using a series of buttons as "on/off'' switches, and I wanted to change the appearance of the button when activated. I thought this would be a simple operation, but not so in JQM. The prescribed way was to use a simple JQM call: $(element).buttonMarkup({ theme: 'b' }); However this absolutely did not work (if you were attempting to change the very button you were clicking on, because the additional 'event' classes would instantly overwrite the new theme)

After a long process I found that I could do it but only after using JQuery to change several DIVs and add/remove several generated classes at runtime. This was unfortunate and messy.

However I was very happy to find out that the same buttons, with your adapter, are behaving completely as i originally hoped they would.

for example the following Angular directive (partial) will change a button's theme at runtime.

myApp.directive('fltRefresh', function () {
    return function (scope, element, attrs) {
        scope.$watch('Filter.active', function (newValue, oldValue) {
            if (scope.Filter.active) {
                $(element).buttonMarkup({ theme: 'b' });
                $(element).parent().buttonMarkup({ theme: "b" });
           } else {
                $(element).buttonMarkup({ theme: 'c' });
                $(element).parent().buttonMarkup({ theme: "c" });
            }
        }, true);
    }
});

This absolutely wouldn't work before.. but now it does. Thanks again. Sam

caseman72 commented 11 years ago

You should be able to do this and combine the two lines:

$(element).buttonMarkup({ theme: "b" }).parent().buttonMarkup({ theme: "b" });

Or this to make it even cleaner

return function () {
  scope.$watch("Filter.active", function () {
    var theme = scope.Filter.active ? "b" : "c";
    $(element).buttonMarkup({theme: theme}).parent().buttonMarkup({theme: theme});
  }, true);
}
smatthews1999 commented 11 years ago

excellent... that is much better!

Javascript is my favorite language that i will never completely understand! ;-)

tbosch commented 11 years ago

Glad you like the adapter :-)