Пользовательская директива для поля ввода с меткой и проверкой не работает

Question 1

Я новичок в angularJS. Я пытаюсь написать специальную директиву для тега ввода. Мне нужен пользовательский ввод, как показано на рисунке ниже.

По сути, он должен отображать имя метки, текстовое поле и некоторое сообщение проверки, если пользователь вводит недопустимое значение. ниже приведен код, который я пробовал, но который не работает должным образом.

var controller = angular.module('FundooDirectiveTutorial', [])
    .controller('FundooCtrl', function ($scope)
    {
        $scope.validValues = ["ABC", "XYZ"];
        $scope.inputField = "Hello World";
        $scope.updateInput = function (input)
        {
            $scope.inputField = input;
        };
        $scope.isValid = function ()
        {
            for (var i = 0; i < $scope.validValues.length; i++) {
                if ($scope.validValues[i].toLowerCase().indexOf($scope.inputField.toLowerCase()) == 0) {
                    return true;
                }
            }
            return true;
        };
    });

    controller.directive('fundooInput', function ()
    {
        return {
            restrict:'E',

            scope:{
                labelName:"=",
                inputValue:'=',
                onInputChange:'&',
                isValid : '&'
            },
            template:'<div><label>scope.labelName</label><input type="text" ng-model="inputValue" ng-change="updateValidity(inputValue)">' +
                    '<h6 ng-show="valid">Entered value is not correct</h6></div>',
            link:function (scope, elem, attrs)
            {
                scope.updateValidity = function (newValue)
                {
                    scope.inputValue=newValue;
                    scope.onInputChange(newValue);
                    scope.valid = scope.isValid();
                };
            }
        }
    });

HTML файл

<html ng-app="FundooDirectiveTutorial">
<head>
    <title>Input Directive Demo</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
    <script type="text/javascript" src="app/controllers/FundooCtrl.js"></script>
</head>

    <body ng-controller="FundooCtrl">
        input value is {{inputField}}<br/>
        <fundoo-input labelName="Name" input-value="inputField" on-input-change="updateInput(inputField)" is-valid="isValid()"/>
        Latest input value is {{inputField}}
    </body>
</html>

Может ли кто-нибудь помочь, что может быть не так?

angularjs-directive

0

user3153189 12 Мар 2014 в 17:06

Answer

Да, вы можете работать с этим с помощью элементов управления начальной загрузки , в начальной загрузке доступны два типа элементов управления, которые удовлетворяют вашу основную потребность в наличии окна предупреждения справа.

1) Использование всплывающего окна 2) Использование всплывающей подсказки

Итак, где писать код в вашей директиве, где вы создали шаблон для работы

template:'<div><label>scope.labelName</label><input type="text" ng-model="inputValue" ng-change="updateValidity(inputValue)">' +
         '<h6 ng-show="valid">Entered value is not correct</h6></div>',

Прежде всего измените свой элемент h6 на какой-либо другой диапазон или div и включите элементы управления начальной загрузки, поскольку атрибут для этого, например, обновленного кода,

template:'<div><label>scope.labelName</label><input type="text" ng-model="inputValue" ng-change="updateValidity(inputValue)" >' +
         '<button type="button" class="btn btn-default" ng-show="valid" data-toggle="popover" data-placement="right" title="Entered value is not correct">Entered value is not correct</button></div>',

Вот как импортировать bootstrap.min.js и bootstrap.min.css, и все готово. Надеюсь, это поможет.

0

Lalit Sachdeva 12 Мар 2014 в 17:48

Question 2