Angularjs : directive not called

Question

I have an input :

<table>
...
<td style="width:59px"><input ng-model="myModel.propertyOne"  ng-blur="persistValue(myModel)"  enter-as-tab></td>
<td style="width:59px"><input ng-model="myModel.propertyTwo"  ng-blur="persistValue(myModel)"  enter-as-tab></td>

with its directive

angular.module('bioandbioApp').directive('enterAsTab', function () {
    return function (scope, element, attrs) {
        element.bind("keydown keypress", function (event) {
            if(event.which === 13) {
                event.preventDefault();
                var elementToFocus = element.next('td').find('input')[1];
                if(angular.isDefined(elementToFocus))
                    elementToFocus.focus();
            }
        });
    };
});

This directive is called when user press Enter, and set the focus to the input of the next tag.

My problem is that the directive is called but elementToFocus.focus() is not called so the focus is not set.

I don't understand why. Does anyone know?

http://jsfiddle.net/tomy29/vpaqt29d/105/

Thanks

Care to create a fiddle or plunker?

Vipul Agarwal
– Vipul Agarwal

2015-09-07 08:00:52 +00:00
Commented Sep 7, 2015 at 8:00 — Vipul Agarwal
– Vipul Agarwal, Commented Sep 7, 2015 at 8:00

Vipul Agarwal · Accepted Answer · 2015-10-29 13:17:17Z

You need to find the parent first and then go the next element.

Try the below code:

var app = angular.module("ap", []);

app.controller("con", function ($scope) {

    $scope.persons = [{
        name: 'Susan',
        age: 1
    }, {
        name: 'Peter',
        age: 1
    }, {
        name: 'Jack',
        age: 2
    }];
});

app.directive('enterAsTab', function () {
    return function (scope, element, attrs) {
        element.bind("keydown keypress", function (event) {
            if (event.which === 13) {
                event.preventDefault();
                console.log("parent");
                console.log(element.parent())
                var elementToFocus = element.parent().next('td').find('input')[0];
                console.log("next element");
                console.log(elementToFocus);
                if (angular.isDefined(elementToFocus)) elementToFocus.focus();
            }
        });
    };
});

JSFiddle

--EDIT--
This definitely can be optimized but a crud way of doing is as below:

<body ng-app="ap" ng-controller="con">
     <h4>Pressing <i>Enter/Return</i> in the <i>Age</i> field will iterate through the ages</h4>

    <table>
        <tr>
            <th>Name</th>
            <th>Age</th>
        </tr>
        <tr ng-repeat='person in persons'>
            <td>
                <input type='text' name="personName" ng-model="person.name" enter-as-tab />
            </td>
            <td>
                <input type='number' name="personAge" ng-model="person.age" enter-as-tab/>
            </td>
        </tr>
    </table>
</body>

var app = angular.module("ap", []);

app.controller("con", function ($scope) {

    $scope.persons = [{
        name: 'Susan',
        age: 1
    }, {
        name: 'Peter',
        age: 1
    }, {
        name: 'Jack',
        age: 2
    }];
});

app.directive('enterAsTab', function () {
    return function (scope, element, attrs) {
        element.bind("keydown keypress", function (event) {
            if (event.which === 13) {
                event.preventDefault();
                console.log("parent");
                console.log(element.parent())
                var elementToFocus = element.parent().next('td').find('input')[0];
                console.log('next element');
                console.log(elementToFocus);
                if (angular.isDefined(elementToFocus)) {
                    elementToFocus.focus();
                } else {
                    element.parent().parent().next('tr').find('input')[0].focus();
                }
            }
        });
    };
});

JSFiddle

Your solution is not taking the focus to the next input element when in the age input box. I think the proper solution would be to take the focus to the next input element in the table.

Arun AK · Accepted Answer · 2015-09-07 08:17:09Z

0

you can use this code

$(this).closest('td').next('td').find('input')[0];

Currently, this is the input field of the current td. So, by that, you can find the input to the next of the current td.

Here is the working JSFIDDLE

answered Sep 7, 2015 at 8:17

Arun AK

4,3902 gold badges26 silver badges48 bronze badges

1 Comment

Vipul Agarwal Over a year ago

Your solution is not taking the focus to the next input element when in the age input box. I think the proper solution would be to take the focus to the next input element in the table.

Vipul Agarwal · Accepted Answer · 2015-09-07 08:37:46Z

0

Although your fiddle is using static contents and a fixed set of fields, below is how I achieved the solution, however, depending on the dynamic content and your requirements, the solution may vary:

app.directive('enterAsTab', function () {
    return function (scope, element, attrs) {
        element.bind("keydown keypress", function (event) {
            if(event.which === 13) {
                event.preventDefault();
                var elementToFocus;

                if(attrs["name"] == "personAge"){                 
                    elementToFocus = element.parent().parent().next().find('input')[0];
                }else{
                    elementToFocus = element.parent().next().find('input')[0];
                }

                if(angular.isDefined(elementToFocus))
                    elementToFocus.focus();
            }
        });
    };
});

edited Sep 7, 2015 at 8:37

answered Sep 7, 2015 at 8:08

Vipul Agarwal

1,6713 gold badges15 silver badges26 bronze badges

2 Comments

user1260928 Over a year ago

it goes to the next input, but in the next <tr> , not in the same <tr>

Vipul Agarwal Over a year ago

Updated the answer as per your fiddle.

Collectives™ on Stack Overflow

Angularjs : directive not called

3 Answers 3

1 Comment

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related