How to create and display multiple custom directives in AngularJS

Question

I am creating multiple custom directives to display textboxes with different data input restrictions. Once displayed I would like to show only one based upon the selection made in a drop down box. I have created at least two custom directives - one for a textbox which will allow only numbers and another only characters. Later I will add two more for special characters and any character also. Currently I have the onkeypress functionalities in javascript. Can someone help me to move it to angularJS? The following is my code.

    <!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
</head>
<body>
    <div ng-app="TextboxExample" ng-controller="ExampleController">
        <form name="shippingForm" novalidate>
            <number-only-input />
            <br />
            <text-only-input />
            <br />
            <select id="textBoxOptions" >
                <option value="number" selected="selected">Numbers Only</option>
                <option value="text">Text Only</option>
                <option value="special">Special Characters</option>
                <option value="any">Any Value</option>
            </select>

        </form>
    </div>
    <script>
        function isNumberKey(evt) {
            var charCode = (evt.which) ? evt.which : evt.keyCode;
            if (charCode != 46 && charCode > 31
              && (charCode < 48 || charCode > 57))
                return false;
            return true;
        }
        function isTextKey(evt) {
            var charCode = (evt.which) ? evt.which : evt.keyCode;
            if ((charCode > 90 || charCode < 97 )
              && (charCode < 65 || charCode > 122))
                return false;
            return true;
        }

    </script>
    <script src="scripts/angular.js"></script>
    <script src="scripts/jquery.min.js"></script>
    <script>       
        $("select").change(function () {

            var selected = $("#textBoxOptions").val();
            $('#customTextBox').attr("ng-model", selected);
        });
    </script>
    <script>

        angular.module('TextboxExample', [])
        .controller('ExampleController', ['$scope', function ($scope) {
            $scope.testvalue = { number: 1, validity: true };
        }])
        .directive('numberOnlyInput',  function () {
            return {
                restrict: 'E',
                template: '<INPUT id="numChar" onkeypress="return isNumberKey(event)" type="text" name="txtChar">',
            };

        })
        .directive('textOnlyInput', function () {
            return {
                restrict: 'E',
                template: '<INPUT id="txtChar" onkeypress="return isTextKey(event)" type="text" name="txtChar">',
            };

        });
    </script>
</body>
</html>

The easiest way to do this is to set a flag on the controller and use an ng-if. Also, if you're using Angular, you shouldn't be using jQuery. I'll try to create a plnkr for you to see if I can help out. — Chris Stanley
– Chris Stanley, Commented Apr 24, 2016 at 16:36
Chris, Yes, I should not be using jQuery. Unfortunately I am still figuring out the intricacies of Angular. — Massey
– Massey, Commented Apr 24, 2016 at 17:10
Ah, yes, but the best way to learn its intricacies is by not relying on jQuery at all. I found that I learned more Angular when I couldn't fall back on something else. — Chris Stanley
– Chris Stanley, Commented Apr 24, 2016 at 20:28

2ps · Accepted Answer · 2016-04-24 16:38:07Z

1

Here is the code for what Chris is suggesting:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
</head>
<body>
    <div ng-app="TextboxExample" ng-controller="ExampleController">
        <form name="shippingForm" novalidate>
            <number-only-input ng-if="optionValue=='number'"/>
            <br />
            <text-only-input ng-if="optionValue=='text'"/>
            <br />
            <select id="textBoxOptions" ng-model="optionValue">
                <option value="number" selected="selected">Numbers Only</option>
                <option value="text">Text Only</option>
                <option value="special">Special Characters</option>
                <option value="any">Any Value</option>
            </select>

        </form>
    </div>
    <script>
        function isNumberKey(evt) {
            var charCode = (evt.which) ? evt.which : evt.keyCode;
            if (charCode != 46 && charCode > 31
              && (charCode < 48 || charCode > 57))
                return false;
            return true;
        }
        function isTextKey(evt) {
            var charCode = (evt.which) ? evt.which : evt.keyCode;
            if ((charCode > 90 || charCode < 97 )
              && (charCode < 65 || charCode > 122))
                return false;
            return true;
        }

    </script>
    <script src="scripts/angular.js"></script>
    <script src="scripts/jquery.min.js"></script>
    <script>

        angular.module('TextboxExample', [])
        .controller('ExampleController', ['$scope', function ($scope) {
            $scope.optionValue = 'number';
            $scope.testvalue = { number: 1, validity: true };
        }])
        .directive('numberOnlyInput',  function () {
            return {
                restrict: 'E',
                template: '<INPUT id="numChar" onkeypress="return isNumberKey(event)" type="text" name="txtChar">',
            };

        })
        .directive('textOnlyInput', function () {
            return {
                restrict: 'E',
                template: '<INPUT id="txtChar" onkeypress="return isTextKey(event)" type="text" name="txtChar">',
            };

        });
    </script>
</body>
</html>

answered Apr 24, 2016 at 16:38

2ps

16k2 gold badges34 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Massey Over a year ago

This was a great help. Still I have the logic in the isNumberKey and isTextKey javascript functions. I tried to move them to the link function within the custom directive. But I was not successful. Thanks

2ps Over a year ago

Since it seems you are fairly new to angularJS, this will be a bit of a struggle, but the right way to do that is to use $parser, yet but you can read about parsers here and here

Massey Over a year ago

Finally I have managed to finish by using link:function and keypress event.

Collectives™ on Stack Overflow

How to create and display multiple custom directives in AngularJS

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related