在弹出窗口中,我显示的是html,我从另一个div复制并在弹出窗口中显示。 在这里,我想验证此输入字段是否必需。并在输入框下方显示错误消息。 的index.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;
}
为了保持其他动作分开,我编写了新的控制器utilityCtrl.js。在这里我写了隐藏这个弹出窗口的动作。
$scope.closePopup = function ()
{
console.log('here in utility');
$rootScope.myModal = false;
document.getElementById('dynamicContect').innerHTML = "";
}
如何在此处设置验证? https://plnkr.co/edit/aV65Nab9U9I6YlK2g4sY?p=preview
答案 0 :(得分:2)
查看更新的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);
});
}
答案 1 :(得分:0)
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
});
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.2.25/angular.js" data-semver="1.2.25"></script>
</head>
<body ng-controller="MainCtrl">
<div ng-form="myForm">
<input type="text" required ng-model="user.name" placeholder="Username">
<button ng-click="doSomething()" ng-disabled="myForm.$invalid">DO</button>
</div>
</body>
</html>