[英]convert jquery form submission to angular
我正在尝试将以下jquery转换为angular,但似乎无法使其正常工作。
// jquery
$('#formsubmit').click(function(ev){
ev.preventDefault();
$.ajax({
url: "/url.json",
type: "POST",
data: {email: $("#emailinput").val()},
dataType: "json",
success: function(data){
console.log(data);
},
error: function(data){
console.log(data);
}
});
});
<!--html -->
<form action="/" method="post">
<input type="text" id="emailinput" name="emailinput" />
<input type="submit" id="formsubmit">
</form>
这是我的角度。 我将大多数逻辑放入控制器中,但我不确定这是否是最佳方法。 使用指令会更好吗?
var app = angular.module("app", []);
app.controller('myCtrl', [
'$scope',
'$http',
function($scope, $http) {
$scope.submitform = function() {
$http({
url: "/url.json",
method: "POST",
data: {email: $scope.email}
}).success(function(data, status, headers, config) {
$scope.data = data;
}).error(function(data, status, headers, config) {
$scope.status = status;
});
}
}]);
<!-- html -->
<div ng-controller="myCtrl">
<form method="post" ng-submit="submitform()" novalidate>
<input type="text" ng-model="email" required></input>
<button type="button"></button>
</form>
</div>
编辑
感谢你目前的帮助。 我做了一些调整,但仍然有问题。 当我单击按钮时,似乎什么都没有发生。 到目前为止,这就是我所拥有的。
------ HTML ------
<!-- putting everything in emailDir directive -->
<emailDir>
<input type="text" ng-model="email"></input>
<button ng-click="send">submit</button>
</emailDir>
------工厂文件------
var emailUser = angular.module("emailUsers", []);
emailUser.factory("emailUsers", [ "$http", "$q", function($http, $q){
var fetch = function(theEmail){
$http.post('/url', {email: theEmail})
.success(function(data, status, headers, config) {
$scope.data = data;
console.log("success", data);
}).error(function(data, status, headers, config) {
$scope.status = status;
console.log("error", status);
});
}
return {
fetch: fetch,
}
}]);
- - -指示 - - -
var emailSubscribe = angular.module("emailsubscribe", []);
emailSubscribe.directive('emailDir', [function() {
return {
restrict: 'E',
replace: true,
controller: ['$scope', '$filter', '$attrs', 'i18n', 'emailUsers', function($scope, $filter, $attrs, i18n, emailUsers) {
$scope.email;
$scope.response = [];
// when the user clicks the button with the ng-click="send",
// I want this to call the factory "emailUsers" fetch function function
$scope.send = function() {
emailUsers.fetch($scope.email).then(function(responses) {
$scope.response = responses;
});
}
}]
};
}]);
-------- -------依赖
// app.js file
var dependencies = ["emailUsers", "emailsubscribe"]
我想您的服务器端会通过变量String来接收电子邮件。 但是,当您转换为angular时,您将发送封装在{name:value}
格式的json对象中的电子邮件。 它不是字符串。
如果我是对的,只需修改data: $scope.email
,就可以了。
您能否显示更多有关服务器端实施的信息?
您应该像这样调用$http
服务post
函数:
$http.post('/url.json', {email: $scope.email})
.success(function(data, status, headers, config) {
$scope.data = data;
}).error(function(data, status, headers, config) {
$scope.status = status;
});
和<button>
应型submit
,优选具有一些文本。
<button type="submit">go</button>
您可以使整个表单成为指令,并使用myCtrl
作为该指令的控制器。 请参阅AngularJS指令文档 。
您被要求提交但未传递任何值。 因此您需要将值传递给范围。
var app = angular.module("app", []);
app.controller('myCtrl', [
'$scope',
'$http',
function($scope, $http) {
$scope.submitform = function(credentials) {
$http({
url: "/url.json",
method: "POST",
data: {email: credentials.email}
}).success(function(data, status, headers, config) {
$scope.data = data;
}).error(function(data, status, headers, config) {
$scope.status = status;
});
}
}]);
<!-- html -->
<div ng-controller="myCtrl">
<form method="post" ng-submit="submitform(user)" novalidate>
<input type="text" ng-model="user.email" required></input>
<button type="submit"></button>
</form>
</div>
我发现自己在做什么错。 指令名称不能以驼峰表示。 用emaildir替换emailDir
- - -指示 - - -
var emailSubscribe = angular.module("emailsubscribe", []);
emailSubscribe.directive('emaildir', [function() {
return {
restrict: 'E',
replace: true,
controller: ['$scope', '$filter', '$attrs', 'i18n', 'emailUsers', function($scope, $filter, $attrs, i18n, emailUsers) {
$scope.email;
$scope.response = [];
function
$scope.send = function() {
emailUsers.fetch($scope.email).then(function(responses) {
$scope.response = responses;
});
}
}]
};
}]);
<emaildir>
<input type="text" ng-model="email"></input>
<button ng-click="send">submit</button>
</emaildir>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.