CODEWITHSUNDEEP
javascriptangularjsangularjs-directive
Artur Kasperek
Artur Kasperek

Reputation: 645

How to catch blur or focus event in angularJS directive

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 ?

Upvotes: 4

Views: 14423

Answers (2)

Artur Kasperek
Artur Kasperek

Reputation: 645

.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

Upvotes: 0

Ahmet Zeytindalı
Ahmet Zeytindalı

Reputation: 451

On your link function you bind them

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

Upvotes: 17

Related Questions