Angular js ng-click not working
Question
I am trying to add form validation using JavaScript. When I add
document.getElementById("one").setAttribute("ng-click", "insertData()");
to validateForm function, it does not work after I press the button.
When I move that line out of validateForm function it works, but does not perform form validation.
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 answers
solution1
0 2017-11-16 15:33:04
Ok, what you are trying to do is not how angularjs works; i suggest you to read angularjs form documentation , especially the Binding to form and control state chapter. 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
solution2
0 2017-11-16 15:40:51
You need to tell Angular that you've added an attribute, otherwise it doesn't work. When adding an attribute to your template file, Angular knows, but when adding it by setAttribute() , Angular has no idea.
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
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.