How to catch blur or focus event in angularJS directive

Question

I have directive with input

<input ng-model="inputModel" ng-disabled="ngDisabled || isLoading" value="{{value}}" type="{{type}}" placeholder="{{placeholder | translate}}">

I use this directive like this:

<input-ext type="'text'" name="email" ng-model="registerCtrl.email" ng-blur="registerCtrl.test()" required></input-ext>

I want to after blur inside my directive to executed blur in input-ext ... , for this example code in controller, how to make this ?

To trigger blur, you need to set focus on it. you might need $timeout to set focus on that. — YOU, Sep 03 '15 at 09:10
check [this](http://stackoverflow.com/questions/14859266/input-autofocus-attribute) and ultimately [this](http://jsfiddle.net/HarshMehta/q2zcf5yp/). — road2victory, Sep 03 '15 at 09:24

score 17 · Accepted Answer · answered Sep 03 '15 at 09:21

17

On your link function you bind them

   link: function (scope, element, attrs) {
        element.bind('blur', function (e) {
             //do something
        });
   }

answered Sep 03 '15 at 09:21

Ahmet Zeytindalı

451
3
10

score 0 · Answer 2 · answered Sep 03 '15 at 10:51

.directive('inputExt', function() {
        return {
            restrict: 'E',
            templateUrl: 'templates/inputExt3.html',
            require: 'ngModel',
            scope: {
                'name' : '@',
                'type' : '=',
                'placeholder' : '=',
                'value' : '=',
                'ngDisabled': '=',
                'isLoading' : '=',
                'customStatus': '=',
                'cutomStatusType': '=',
                'test' : '&'
            },
            link: function($scope, element, attrs, ngModelCtrl) {
                $scope.placeholder = $scope.placeholder == undefined ? $scope.name : $scope.placeholder;
                $scope.$watch('inputModel', function() {
                    ngModelCtrl.$setViewValue($scope.inputModel);
                });
                ngModelCtrl.$parsers.push(function(viewValue) {
                    ngModelCtrl.$validate();
                    $scope.invalid = ngModelCtrl.$invalid;
                    $scope.error = ngModelCtrl.$error;
                    return viewValue;
                });
            }
        }
    })

I dont known that You undestand me well, if user add to inputExt ng-blur and add to this atribiute some argument, function, this function should be executed when user go out from input in directive

How to catch blur or focus event in angularJS directive

2 Answers2