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, Apr 24 '16 at 16:36
Chris, Yes, I should not be using jQuery. Unfortunately I am still figuring out the intricacies of Angular. — Massey, Apr 24 '16 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, Apr 24 '16 at 20:28

score 1 · Answer 1 · answered Apr 24 '16 at 16:38

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>

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 — Massey, Apr 24 '16 at 18:43
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](http://stackoverflow.com/questions/14419651/filters-on-ng-model-in-an-input/14425022#14425022) and [here](https://github.com/angular/angular.js/issues/9156) — 2ps, Apr 25 '16 at 03:52
Finally I have managed to finish by using link:function and keypress event. — Massey, Apr 25 '16 at 05:17

How to create and display multiple custom directives in AngularJS

1 Answers1