0

所以这里是这样的场景：我在一个页面中有多个时事通讯表单，我需要所有这些表单都执行相同的操作：使用一些数据发出 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 请求但没有成功......任何人都知道如何改进这段代码？谢谢。

4

1 回答 1

2

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

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

我会说，一个指令可以处理这个问题，但由于你并没有真正进行 DOM 操作，你可能可以在控制器中使用ngClickand相当容易地完成所有这些工作ngSubmit。

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

如果您的代码只是处理表单提交，您可以在控制器中完成。如果它在同一页面上处理多个表单，那么指令将起作用，或者您可以修改控制器以处理表单，无论哪种方式都可以。

于 2013-05-06T17:08:09.620 回答