javascript - 将 Controller 链接到表单提交的指令。我缺少什么？

Question

场景如下:我在整个页面中有多个新闻通讯表单，并且需要所有这些表单执行相同的操作:使用一些数据发出 AJAX 请求，并在请求完成后使用警报向用户返回消息。到目前为止我有这个:

var myApp = angular.module('myApp', []);
myApp.directive('form-newsletter', [function() {
    return {
        restrict: 'C',
        link : function($scope, elem) {
              $scope.data = { }
              var $el = elem.find('button[type=submit]');
              $el.on('click' , function(){
                  if (! $scope.data.email ){
                      alert("Please, fill in the e-mail");
                      return false;
                  }
                  if ( $(this).val().length > 0 ){
                      $scope.data.gender = $(this).val();
                  }
                  var data = $scope.data;
                  $.ajax({
                    url: '/newsletter/join',
                    type: 'get',
                    dataType: 'json',
                    data: data,
                    success: function(data) {
                        if (data.validation == true) {
                            alert('Thank you for joining our mailing list.');
                        } else {
                            alert(data.error);
                        }
                    }
                  })
                  return false;
              });
          }
        }
 }]);

它按预期工作，但是，正如您所看到的，我正在使用 jQuery ajax 方法。我想使用 Angular 内置的 http，但由于某种原因我无法注入(inject)它。我还尝试制作一个 Controller 来处理 ajax 请求，但没有成功...有人知道如何改进这段代码吗？谢谢。

Answer 1

您需要将 $http 注入(inject)指令中，以便可以使用它。

myApp.directive('form-newsletter', ['$http',function($http) {

我会说，指令可以处理这个问题，但是由于您并没有真正进行 DOM 操作，因此您可以使用 ngClick 和 ngSubmit< 在 Controller 中相当轻松地完成所有这些操作.

指令被设计为可重用的新 HTML 元素，提供功能、动画、监听器等。它们执行 DOM 操作和/或监听事件并调用 Controller 中的特定函数。

如果您的代码只是处理表单提交，您可能可以在 Controller 中执行此操作。如果它在同一页面上处理多个表单，那么指令就可以工作，或者您也可以修改 Controller 来处理表单，无论哪种方式都可以。