AngularJS - add http prefix to url input field

Question

Our app is being ported from jQuery to AngularJS with bootstrap (angular-ui bootstrap).

One handy feature that was covered by the following excellent post was to add

Answer 1

The previous comment provided by Matt Byrne doesn't work for the https prefix. Checkout the updated version based on previous answers that works with **https prefix too! This was missing there

/^(https?):\/\//i

http://jsfiddle.net/ZaeMS/13

Answer 2

A good way to do this is by using the parsers and formatters functionality of ng-model. Many people use use ng-model as just a binding on isolated scope, but actually it's a pretty powerful directive that seems to lack documentation in the right places to guide people on how to use it to its full potential.

All you need to do here is to require the controller from ng-model in your directive. Then you can push in a formatter that adds 'http://' to the view, and a parser that pushes it into the model when needed. All the binding work and interfacing with the input is done by ng-model.

Unless I can find a good blog on this (very much open to comments from anyone who finds them), an updated fiddle is probably the best way to describe this, this support for URL to be entered manually with 'http' or 'https', as well as auto-prefixing if none of them: http://jsfiddle.net/jrz7nxjg/

This also solves your second problem of not being able to have two isolated scopes on one element, as you no longer need to bind to anything.