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 操作を行っていないため、コントローラ内で and を使用してこれらすべてをかなり簡単に行うことができngClickますngSubmit。

ディレクティブは、再利用可能な新しい HTML 要素として設計され、機能、アニメーション、リスナーなどを提供します。ディレクティブは、DOM 操作を実行したり、イベントをリッスンしたり、コントローラーで特定の関数を呼び出したりします。

コードが単にフォーム送信を処理している場合は、おそらくコントローラーで行うことができます。同じページで複数のフォームを処理している場合は、ディレクティブが機能するか、コントローラーを変更してフォームも処理することができます。どちらの方法でも機能します。

于 2013-05-06T17:08:09.620 に答える