Wishing Angular would support HTML5 dialogs better

Datetime:2016-08-23 03:03:17          Topic: AngularJS  HTML5           Share

This applies to Angular2 too, I guess, but I’m interested Angular1 primarily.

Angular doesn’t support the show/hide semantics of HTML5’s dialog element. You can get it to work though, fairly easily.

An inlined example

Press click me, below.

(text above button)

(text below button, and above dialog in source)

Ooops

{({whatHappened})}

(text below dialog in source)

Dialog should now be show (modal style) in the center of the page.

The source for that

Note: Inserted Angular components can’t use {{ in a Jekyll blog because of the latter’s dependence on Liquid (a server-side templating technology), so you have to use <span ng-bind=”op_field”/> instead of {{op_field}} or ng-model=”field” instead of value=”{{field}}” where appropriate. That is slightly less elegant. Alternatively you can change {{ to something else - that is what I’ve done, here, to {({ via $interpolateProvider . Similarly, }} to })}. Of course for regular use of Angular , just shift back to {{op_field}}.

2016 Caveats

Dialog only works for Chrome, Opera and Android browsers (53% of browsers). So says: caniuse.com .

Therefore, for now, only use HTML5’s dialog for in-house applications where you can dictate the browser in use.





About List