Roswell Studios

139 Fulton Street, Ste 132
New York, NY 10038

Angular directives

— August 22, 2016

Rather than the jQuery way, to assign behaviors via selectors.

$('input').focus().select()

Angular wants to define the behaviors in directives:

.directive('autoSelect', function ($timeout) {
return {
restrict: 'AE',
link: function(scope, element, attrs) {
$timeout(function(){
element[0].select();
element[0].focus();
},125);//wait out angular putting the text into the field
}
};
})

then assign those behaviors to dom elements directly:

>input type="number" ng-model="bid.price" string-to-number auto-select /<

Eventually you too can build up the necessary directive library, each of which re-implements some minor dom element function, each with timeouts of various lengths, just to make sure nothing ever runs the same way twice.

As a bonus, if you work on more than one project and forget which has which directives, you can add the html attribute and absolutely nothing happens.

The string-to-number thing is also required to stop Angular from choking on a ‘100’ for type=number.

Back to all