Javascript 将jquery表单提交转换为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>

-----指示------

--------依赖关系-------

---

我猜你的服务器端通过一个可变字符串接收电子邮件。但是，当您转换为angular时，您发送的电子邮件将封装在一个json对象中，该对象的格式为

{name:value}

。它不是一根弦

如果我是对的，只需修改到

数据：$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;
  });

而且

应该是类型

submit

，最好带有一些文本

<button type="submit">go</button>

go

---

您可以使整个表单成为一个指令，并使用

myCtrl

作为该指令的控制器。请参阅。

您在提交时被调用，但未传递任何值。因此，您需要将值传递给范围

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>

var-app=angular.module（“app”，[]）；
应用程序控制器（'myCtrl'[
“$scope”，
“$http”，
函数（$scope，$http）{
$scope.submitform=函数（凭据）{
$http({
url:“/url.json”，
方法：“张贴”，
数据：{email:credentials.email}
}).success（函数（数据、状态、标题、配置）{
$scope.data=数据；
}).error（函数（数据、状态、标题、配置）{
$scope.status=状态；
});
}
}]);

我发现自己做错了什么。指令名称不能是大小写。将emailDir替换为emailDir

-----指示------

var-emailSubscribe=angular.module（“emailSubscribe”，[]）；
emailSubscribe.directive（'emaildir'，[function（）{
返回{
限制：'E'，
替换：正确，
控制器：['$scope'，'$filter'，'$attrs'，'i18n'，'emailUsers'，函数（$scope，$filter，$attrs，i18n，emailUsers）{
$scope.email；
$scope.response=[]；
功能
$scope.send=函数（）{
emailUsers.fetch（$scope.email）。然后（函数（响应）{
$scope.response=响应；
});
}
}]
};
}]);
提交

我建议您阅读本文档，这是最佳实践，为什么要像以前一样使用

ng点击
而不是
和
？如果要使用
ng单击
，则该值应为调用。e、 g.
ng click=“send（）”
，而不是
ng click=“send”
，但最好使用标准的
元素。那么它现在可以工作了吗？仅仅因为指令的名称？指令名称可以是驼峰大小写<代码>emailSubscribe.directive（'emailDir'，[function（）{/*…*/}]）
和
确实应该有效。（注意指令定义中的驼峰大小写，但模板中的破折号）
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"]

$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 type="submit">go</button>

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>

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>