javascript - 如何在angular js中验证没有表单标签的输入？

Question

在弹出窗口中，我正在显示我从另一个 div 复制并在弹出窗口中显示的 html。在这里，我想验证此输入字段是否为必需。并在输入框下方显示错误信息。 索引.html × 加载中...

  <!-- html of change zip code -->

<div class="hidden" id="updateZipContent">
    <div class="zipContent">
        <div class="padding-bt-2">Please enter new zip code</div>
        <div class="row">
            <div class="text-left col-md-6 padding-bt-2">
                    <input ng-model="zipCode" type="text" class="form-control" maxlength="5" data-required="true" number-only>
            </div>  
            <div class="text-left col-md-4">
                <button class="btn btn-primary form-control">Update</button>
            </div>
        </div>
    </div>
</div>

更改邮政编码操作是用 autoQuotectrl.js 编写的

$scope.changeZipCode = function()
                    {
                        $rootScope.myModal = true;
                        var firstDivContent = document.getElementById('updateZipContent');
                        var secondDivContent = document.getElementById('dynamicContect');
                        secondDivContent.innerHTML = firstDivContent.innerHTML;                        
                    }   

为了将其他操作分开，我编写了新的 Controller utilityCtrl.js。在这里我写了隐藏这个弹出窗口的 Action 。

$scope.closePopup = function ()
        {
            console.log('here in utility');
            $rootScope.myModal = false;
            document.getElementById('dynamicContect').innerHTML = "";
        }

这里如何设置验证？ https://plnkr.co/edit/aV65Nab9U9I6YlK2g4sY?p=preview

Answer 1

查看更新 plunker .

我们可以使用$compile指令。

$scope.changeZipCode = function()
                {
                    $rootScope.myModal = true;
                    var firstDivContent = document.getElementById('updateZipContent');
                    var secondDivContent = document.getElementById('dynamicContect');
                    var clonedElement = $compile(firstDivContent.innerHTML)($scope, function(clonedElement, scope) {
                      //attach the clone to DOM document at the right place
                      secondDivContent.innerHTML ="";
                      angular.element(secondDivContent).append(clonedElement);
                  });                        
                }