将控制器链接到表单提交的指令。 我错过了什么？

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，但由于某些原因我无法注入它。 我还尝试制作一个控制器来处理ajax请求但没有成功......任何人都知道如何改进这段代码？ 谢谢。

Answer 1

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

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

我会说，一个指令可以处理这个问题，但由于你并没有真正做DOM操作，你可以使用ngClick和ngSubmit在控制器中完成所有这些ngSubmit 。

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

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