AngularJS - ngFocus and ngBlur Error

Question

I tried adding a code for ngFocus and ngBlur but everytime i start it, it wont seem to function, heres my js code:

function focusCtrl($scope) {
    $scope.hasFocus = false;
}
angular.module('app', [])
    .directive('ngFocus', ['$parse', function ($parse) {
        return function (scope, element, attr) {
            var fn = $parse(attr['ngFocus']);
            element.on('focus', function (event) {
                scope.$apply(function () {
                    fn(scope, {$event: event});
                });
            });
        };
    }])
    .directive('ngBlur', ['$parse', function($parse) {
        return function(scope, element, attr) {
            var fn = $parse(attr['ngBlur']);
            element.on('blur', function(event) {
                scope.$apply(function() {
                    fn(scope, {$event:event});
                });
            });
        };
    }]);

I'll add my html as well:

<div class="col-lg-10">
<input ng-blur="hasFocus=false" ng-focus="hasFocus=true" type="text"  required="required" class="form-control form-validation" id="name" placeholder="Name" ng-model="artist.name" />
</div>

It gives me this error every time i reload the page, and i can't seem to understand the problem!

Uncaught TypeError: Object #<Object> has no method 'module' Focus.js:4
(anonymous function)

Thanks for the help!

Answer 1

Those directive come with angular (not sure which version they were introduced in

ngFocus

ngBlur

That being said, when you are creating directives, do not prefix them with ng. That prefix is reserved by angular.

"do not prefix your own directives with ng or they might conflict with directives included in a future version of Angular" reference

If you want the functionality of setting focus to a control via a field on your controller's scope take a look at this question.

Answer 2

The Brocco answer is ok, if you want to make custom directive of focus or blur, you can look at example