Как динамически применять пользовательские угловые директивы?

Question

Как динамически применять пользовательские угловые директивы?

0

Я изучаю дополнительные функции в AngularJS, такие как пользовательские директивы. Я хочу иметь текстовое поле, которое с помощью настраиваемой директивы должно допускать только номера или текст только в зависимости от значения, выбранного пользователем из раскрывающегося списка. Мне удалось создать настраиваемую директиву, которая позволяет номерам, основанным только на пользовательской директиве AngularJs, не удается проверить правильность текстового поля. Я не уверен, как динамически применять настраиваемую директиву в том же текстовом поле. Я создаю еще одну настраиваемую директиву, которая допускает только текст, но не уверен, как динамически менять директиву только с директивой text only.

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

Когда я изменяю значение в раскрывающемся списке, он правильно изменяет ng-модель на customTextBox, как проверено элементом проверки. Однако я не уверен, как создавать и применять несколько директив. благодаря

Massey 23 апр. 2016, в 23:56

Источник

0

Просто создайте эту директиву как класс и используйте этот класс условно, используя ng-class. :)
Laxmikant Dange 24 апр. 2016, в 06:36

Теги:

javascript

angularjs

1 ответ

Ещё вопросы

Просто создайте эту директиву как класс и используйте этот класс условно, используя ng-class. :)

Simon Schüpbach · Answer 1 · 2016-04-23T18-11-00.000Z

Есть несколько возможностей. Вы можете переключить директивы atttibute или целые элементы:

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

или

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

или вы меняете режим с динамическими атрибутами директивы

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

Саймон, мне нравится первый подход. Что делать, если у меня есть более двух вариантов? Скажем, только номер, только текст и только специальные символы?
@drifter. Тогда почему вы не используете одну директиву с изменением значений атрибута в зависимости от вашего режима?