How to apply custom angular directives dynamically?

Question

I am exploring advanced features in AngularJS such as custom directives. I want to have a textbox which by using custom directive should allow either numbers only or text only depending upon the value chosen by the user from a dropdown box. I have managed to create a custom directive which allows numbers only based upon AngularJs Custom Directive fails the text box validation . I am not sure how to apply a custom directive dynamically to the same textbox. I have create another custom directive which allows text only, but not sure how to replace the number only directive with the text only directive dynamically.

<body>
<div ng-app="TextboxExample" ng-controller="ExampleController">
    <form name="shippingForm" novalidate>
        <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>

        <input id="customTextBox" unbindable number-only-input type="text" name="name" ng-model="testvalue.number" required />
        <span class="error" ng-show="shippingForm.name.$error.required">
            Please enter a value
        </span>
    </form>
</div>
<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', ['$compile', function ($compile) {
        return {

            link: function (scope, element, attrs) {
                var watchMe = attrs["ngModel"];
                scope.$watch(watchMe, function (newValue, oldValue) {
                    if (newValue == undefined || newValue == null ||   newValue == "") {
                        return;
                    } else if (isNaN(newValue)) {
                        var myVal = watchMe.split(".");
                        switch (myVal.length) {
                            case 1:
                                scope[myVal[0]] = oldValue;
                                break;
                            case 2:
                                scope[myVal[0]][myVal[1]] = oldValue;
                        }
                    }

                    $compile(element)(scope);
                });

            }
        };

    }]);
</script>

When I change the value in the dropdown box, it correctly changes the ng-model on customTextBox as checked by inspect element. However, I am not sure how to create and apply multiple directives. Thanks

Simply create that directive as class, and use that class conditionally using ng-class. :) — Laxmikant Dange
– Laxmikant Dange, Commented Apr 24, 2016 at 6:36

Simon Schüpbach · Accepted Answer · 2016-04-24 06:20:58Z

1

There are several possibilities. You can switch directive atttibute or whole elements:

<input {{ yourmode ? number-directive : text-directive }} ng-model="data">

or

<input  ng-show="yourmode" number-directive ng-model="data">
<input  ng-show="!yourmode" text-directive ng-model="data">

or you change the mode with dynamic directive attributes

<input directive-data="yourmode" my-input-directive ng-model="data">

edited Apr 24, 2016 at 6:20

answered Apr 23, 2016 at 21:10

Simon Schüpbach

2,6833 gold badges15 silver badges26 bronze badges

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

2 Comments

Massey Over a year ago

Simon, I like the first approach. What if I have more than two options? Say, number only, text only and special characters only?

Simon Schüpbach Over a year ago

@drifter. Then why you don't use one directive with changing attribut values depending on your mode?

Collectives™ on Stack Overflow

How to apply custom angular directives dynamically?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related