input disabled with directive select all angular

Question

I want to have an input with text that is disabled but also selects all when you click on it.

Here's a working plnkr

http://plnkr.co/edit/o2hu8MCU2bjVPPFhhBLx?p=info

Here's my directive:

app.directive('selectAll', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            element.on('click', function () {
                this.select();
            });
        }
    };
})

and the html:

  <input type="text" disabled select-All size="60" value="http://google.com"> - directive with disabled
  <br>
  <input type="text" select-All size="60" value="http://google.com"> - directive without disabled

I would like for the input to not be editable but still allow for the select all directive to work.

I tried adding the disabled functionality to the directive but I sometimes use this directive for thing other than input as well.

Any guidance?

Answer 1

so, garuuk, use readonly instead of disabled and just style your input to look disabled. Maybe slightly opaque