Testing ng-model auto-focus on inputs

by hobbyman

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<div ng-controller="MyCtrl">
<form name='addForm'>
    School Name (focus-me==true)<br/>
    <input type='text' name='school_name' ng-model='plan.school_name' focus-me="{{true}}"/>
    <br/>
    School Name 2 (no focus-me)<br/>
    <input type='text' name='school_name_2' ng-model='plan.school_name_2'/>
    <br/><br/>
    {{plan}}
</form>
</div>

CSS

span.custom-error{color:#ff0000;}

JavaScript

var myApp = angular.module('myApp',[]).directive('oldFocusMe', function($timeout) {
    return {
        restrict: 'A', // only activate on element attribute
        scope: { trigger: '@oldFocusMe' },
        link: function(scope, element, attrs) {
            scope.$watch('trigger',function(value) {
               if ( value==="true" ) {
                  $timeout(function(){
                     element[0].focus();
                  },5);
               }
            });
        }
    };
})
.directive('focusMe', function($timeout) {
    return function(scope, element, attrs) {
        attrs.$observe('focusMe', function(value) {
            if ( value==="true" ) {
                $timeout(function(){
                    element[0].focus();
                },5);
            }
        });
    }
});

function MyCtrl($scope) {
}