角js ng单击不起作用
[英]Angular js ng-click not working
问题描述
I am trying to add form validation using JavaScript. 
我正在尝试使用JavaScript添加表单验证。 When I add 当我添加
document.getElementById("one").setAttribute("ng-click", "insertData()");
to validateForm function, it does not work after I press the button. validateForm功能，当我按下按钮后不起作用。
When I move that line out of validateForm function it works, but does not perform form validation. 当我将该行移出validateForm函数时，它可以工作，但不执行表单验证。
Here is my code: 这是我的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body>
<div class="container">
<div ng-app="myapp" ng-controller = "controller">
<div class="row">
<div id="divID"> </div>
<div class="col-sm-12 col-md-10 col-md-offset-1 ">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input class="form-control" id = "k" placeholder="Name" ng-model = "username" name="user_name" type="text" autofocus>
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">
<i class="glyphicon glyphicon-user"></i></span>
<input class="form-control" placeholder="NIC" ng-model = "nic" name="NIC" type="text" value="">
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"> @</span>
<input class="form-control" placeholder="Email" ng-model = "Email" name="email" type="email" value="">
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">
<i class="glyphicon glyphicon-lock"></i></span>
<input class="form-control" placeholder="Password" ng-model = "password" name="Password" type="password" value="">
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">
<i class="glyphicon glyphicon-lock"></i></span>
<input class="form-control" placeholder="Confierm Password" ng-model = "Conf_password" name="Conf_password" type="password" value="">
</div>
</div>
<div class="form-group">
<input type="submit" id = 'one' onclick="validateForm()" class="btn btn-lg btn-primary btn-block" value="Sign Up">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<Script>
function validateForm()
{
var x = document.getElementById("k").value;
if (x == "")
{
document.getElementById("k").setAttribute("placeholder", "Insert Name");
}
else
{
//document.getElementById("one").removeAttribute("onclick");
document.getElementById("one").setAttribute("ng-click", "insertData()");
}
}
// when add this part here code working fine ---- document.getElementById("one").setAttribute("ng-click", "insertData()");
var app = angular.module("myapp", []);
app.controller("controller",function($scope,$http){
$scope.insertData = function()
{
$http.post(
"Signup.php",
{'username':$scope.username,'nic':$scope.nic,'email':$scope.Email,'password':$scope.password,'Conf_password':$scope.Conf_password }
).then(function(data){
var result = angular.toJson(data.data);
var myEl = angular.element( document.querySelector( '#divID' ) );
if(result.replace(/^"|"$/g, '') == 1)
{
myEl.replaceWith("<div class='alert alert-success alert-dismissable fade in'><a href='#' class='close' data-dismiss='alert' aria-label='close'>×</a><strong>Success!</strong>You have sucessfully registerd. Please login</div>");
}
else
{
myEl.replaceWith(result.replace(/^"|"$/g, ''));
}
$scope.username = null;
});
}
});
</script>
2 个解决方案
解决方案1
0 2017-11-16 15:33:04
Ok, what you are trying to do is not how angularjs works; 好的，您要尝试的不是angularjs的工作方式；而是 i suggest you to read angularjs form documentation , especially the Binding to form and control state chapter. 我建议您阅读angularjs表单文档 ，尤其是“ 绑定到表单和控制状态”一章。 Your code seems a clash between jquery and angularjs, i suggest to you to re read angularjs phonecat tutorial or, even better, to try the new version of angular 您的代码似乎在jquery和angularjs之间发生冲突，我建议您重新阅读angularjs phonecat教程，或者甚至更好的是，尝试使用新版本的angularjs
解决方案2
0 2017-11-16 15:40:51
You need to tell Angular that you've added an attribute, otherwise it doesn't work. 您需要告诉Angular您已经添加了一个属性，否则它不起作用。 When adding an attribute to your template file, Angular knows, but when adding it by setAttribute() , Angular has no idea. 将属性添加到模板文件时，Angular知道，但是通过setAttribute()添加属性时，Angular不知道。
In your controller, add the following two dependencies: 在您的控制器中，添加以下两个依赖项：
app.controller("controller", function($compile, $document, $scope, $http) {
//
});
Now, after adding the attribute to the element, you need to re-compile it: 现在，在将属性添加到元素之后，您需要重新编译它：
$document.getElementById("one").setAttribute("ng-click", "insertData()");
// Try this:
$compile($document.getElementById("one"));
// If it doesn't work, or gives an error, try this:
$compile($document.getElementById("one"))($scope);
Note: I use $document, not document 注意：我使用$ document，而不是document
Documentation for $compile $ compile的文档
Note: I cannot really test if this works for your code, but it should at least point you in the right direction. 注意：我无法真正测试这是否适用于您的代码，但至少应为您指明正确的方向。 Your problem is that Angular doesn't know you added the attribute. 您的问题是Angular不知道您添加了该属性。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.