CODEWITHSUNDEEP
javascriptangularjs
Massey
Massey

Reputation: 1125

How to apply custom angular directives dynamically?

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

Upvotes: 0

Views: 773

Answers (1)

Simon Sch&#252;pbach
Simon Sch&#252;pbach

Reputation: 2683

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">

Upvotes: 1

Related Questions