我有一个表单，一些输入字段动态填充了我无法访问的外部脚本。字段已填满，但当我提交时，它认为它们是空的。
有没有办法在不添加外部库的情况下执行此操作？
我有范围。$ watch但我可能做错了。附上的是代码。
编辑：我在代码中使用的jQuery只是用于添加输入值来模仿外部脚本。用户将单击将自动填充输入字段的按钮。我不能在我的实际代码中使用jQuery，这需要与jqlite 100％角度。
// create angular app
var validationApp = angular.module('validationApp', []);
// create angular controller
validationApp.controller('mainController', function($scope) {
$scope.userForm = {};
// function to submit the form after all validation has occurred
$scope.submitForm = function() {
// check to make sure the form is completely valid
if ($scope.userForm.$valid) {
alert('our form is amazing');
}
};
});
//create directive
validationApp.directive('mainDirective', function() {
return function(scope, el, attrs) {
scope.$watch('userForm.'+attrs.name+'.$valid', function(newVal, oldVal) {
console.log("newVal: ", newVal);
}, true);
}
});
//Dynamically adding a value to the input DO NOT CHANGE
$(document).ready(function() {
setTimeout(function() {
$('.form .name').val('John Doe');
$('.form .username').val('johnd2017');
$('.form .email').val('johnd2017@test.com');
}, 2000);
});body { padding-top:30px; }<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.angularjs.org/1.3.14/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-app="validationApp" ng-controller="mainController">
<div class="container">
<div class="row">
<div class="col-sm-6">
<!-- FORM ============ -->
<form name="userForm" class="form" ng-submit="submitForm()" main-directive novalidate>
<!-- NAME -->
<div class="form-group" ng-class="{ 'has-error' : userForm.name.$invalid && userForm.$submitted }">
<label>Name</label>
<input type="text" name="name" class="form-control name" ng-model="user.name" required>
<p ng-show="userForm.name.$invalid && userForm.$submitted" class="help-block">You're name is required.</p>
</div>
<!-- USERNAME -->
<div class="form-group" ng-class="{ 'has-error' : userForm.username.$invalid && userForm.$submitted }">
<label>Username</label>
<input type="text" name="username" class="form-control username" ng-model="user.username" ng-minlength="3" ng-maxlength="8" required>
<p ng-show="userForm.username.$error.minlength" class="help-block">Username is too short.</p>
<p ng-show="userForm.username.$error.maxlength" class="help-block">Username is too long.</p>
<p ng-show="userForm.username.$invalid && userForm.$submitted" class="help-block">You're username is required.</p>
</div>
<!-- EMAIL -->
<div class="form-group" ng-class="{ 'has-error' : userForm.email.$invalid && userForm.$submitted }">
<label>Email</label>
<input type="email" name="email" class="form-control email" ng-model="user.email" required>
<p ng-show="userForm.email.$invalid && !userForm.email.$pristine" class="help-block">Enter a valid email.</p>
<p ng-show="userForm.name.$invalid && userForm.$submitted" class="help-block">You're email is required.</p>
</div>
<!-- CITY -->
<div class="form-group city">
<label>City</label>
<input type="text" name="city" class="form-control city" ng-model="user.city">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<div class="col-sm-6">
<!-- VALIDATION TABLES ======== -->
<div class="row">
<div class="col-xs-3">
<h3>Form</h3>
<table class="table table-bordered">
<tbody>
<tr>
<td ng-class="{ success: userForm.$valid, danger: userForm.$invalid }">Valid</td>
</tr>
<tr>
<td ng-class="{ success: userForm.$pristine, danger: !userForm.$pristine }">Pristine</td>
</tr>
<tr>
<td ng-class="{ success: userForm.$dirty }">Dirty</td>
</tr>
</tbody>
</table>
</div>
<div class="col-xs-3">
<h3>Name</h3>
<table class="table table-bordered">
<tbody>
<tr>
<td ng-class="{ success: userForm.name.$valid, danger: userForm.name.$invalid }">Valid</td>
</tr>
<tr>
<td ng-class="{ success: userForm.name.$pristine, danger: !userForm.name.$pristine }">Pristine</td>
</tr>
<tr>
<td ng-class="{ success: userForm.name.$dirty }">Dirty</td>
</tr>
<tr>
<td ng-class="{ success: userForm.name.$touched }">Touched</td>
</tr>
</tbody>
</table>
</div>
<div class="col-xs-3">
<h3>Username</h3>
<table class="table table-bordered">
<tbody>
<tr>
<td ng-class="{ success: userForm.username.$valid, danger: userForm.username.$invalid }">Valid</td>
</tr>
<tr>
<td ng-class="{ success: userForm.username.$pristine, danger: !userForm.username.$pristine }">Pristine</td>
</tr>
<tr>
<td ng-class="{ success: userForm.username.$dirty }">Dirty</td>
</tr>
<tr>
<td ng-class="{ success: userForm.username.$touched }">Touched</td>
</tr>
</tbody>
</table>
</div>
<div class="col-xs-3">
<h3>Email</h3>
<table class="table table-bordered">
<tbody>
<tr>
<td ng-class="{ success: userForm.email.$valid, danger: userForm.email.$invalid }">Valid</td>
</tr>
<tr>
<td ng-class="{ success: userForm.email.$pristine, danger: !userForm.email.$pristine }">Pristine</td>
</tr>
<tr>
<td ng-class="{ success: userForm.email.$dirty }">Dirty</td>
</tr>
<tr>
<td ng-class="{ success: userForm.email.$touched }">Touched</td>
</tr>
</tbody>
</table>
</div>
<div class="col-xs-3">
<h3>City</h3>
<table class="table table-bordered">
<tbody>
<tr>
<td ng-class="{ success: userForm.city.$valid, danger: userForm.city.$invalid }">Valid</td>
</tr>
<tr>
<td ng-class="{ success: userForm.city.$pristine, danger: !userForm.city.$pristine }">Pristine</td>
</tr>
<tr>
<td ng-class="{ success: userForm.city.$dirty }">Dirty</td>
</tr>
<tr>
<td ng-class="{ success: userForm.city.$touched }">Touched</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
答案 0 :(得分：0)
因为如果某些html在角度编译和链接之后动态添加，您需要使用此$compile service自行编译添加的部分。
但是如果您只想更改angular之外的输入值，则需要触发输入并更改这些输入上的事件以通知有关该更改的角度。 例如，可以使用类似的代码完成：
$(document).ready(function() {
var notifyAngularAboutChange = function () {
$('.form .name').trigger('input');
$('.form .name').trigger('change');
$('.form .username').trigger('input');
$('.form .username').trigger('change');
$('.form .email').trigger('input');
$('.form .email').trigger('change');
};
var checkChange = function () {
// check for expected changes in needed elements
// and return true if change found
};
vat waitForChange = function () {
if (checkChange()) {
notifyAngularAboutChange();
} else {
setTimeout(waitForChange, 100);
}
};
waitForChange();
});