Question

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

有人可以帮助解决可能出错的问题吗？

Answer 1

是的，你可以使用 bootstrap controls 来解决这个问题，bootstrap中有两种类型的控件可以满足你在右边有一个警告框的基本需求。

1）使用popover 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更改为其他某个span或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并完成它。希望这会有所帮助。

带有标签和验证的输入字段的自定义指令不起作用

1 个答案: