4

送信時にフォームをフェードアウトし、カスタム メッセージを含むテンプレートに置き換えることができるように、angular でカスタム ディレクティブを作成しました。望ましいワークフローは次のとおりです。

  • ユーザーはフォームに入力し、[送信] をクリックします。
  • コントローラーは、新しいオブジェクトでモデルを更新し、いくつかの引数で「formSubmitted」イベントを発行します。
  • ディレクティブはイベントをリッスンし、フォームをフェードアウトします。
  • ディレクティブは、イベントからの引数で満たされた部分的な html をロードします。

最初の 3 つの手順は解決しましたが、最後の手順を回避できませんでした (html を文字列としてハードコーディングしたくありません。可能であれば、別のファイルから取得したいと考えています)。

どうすればそれができますか？

編集：いくつかのサンプルコード（簡略化）：

これは次の形式です。

<section class="hero-unit {{containerClass}}" tk-jq-replace-children>
    <h2>{{formTitle}}</h2>
    <form class="form-search" name="solform" novalidate>
        <fieldset>
        ...

これはコントローラーです：

if( formWasSavedOk ){
    $scope.formSubmittedMsg = msg;
//Here emits the custom event
    $scope.$emit( 'solicitud:formSubmitted' );
}

これはディレクティブです:

.directive( 'tkJqReplaceChildren', function( $compile ){
    return {
        link: function( $scope, $iElement/*, $iAttrs*/ ){
            //The directive listens for the event
            $scope.$on( 'solicitud:formSubmitted', function( /*event*/ ){
                $iElement
                    .children()
                    .fadeOut(1000)
                    .promise()
                    .done(function(){
                        var $detachedElments = $(this).detach();
                        //The html is compiled and added to the DOM
                        $iElement.html( $compile( "<h2>{{formSubmittedMsg}}</h2>" )($scope) );
                        $scope.$apply();
                      });
            });
        }
    };
});

<h2>{{formSubmittedMsg}}</h2>app/partials/create/createdOk.html からプルしたいコードです (これは単なるヘッダー以上のものです。そのため、ファイルからロードしたいのです)

4

2 に答える 2

2

外部のhtmlスニペットを取得する「Angularの方法」は、ng-include ディレクティブを使用することだと思います:

<ng-include
       src="{string}"
       [onload="{string}"]
       [autoscroll="{string}"]>
</ng-include>

ディレクティブが機能しなかった理由については、コンパイルフェーズではなく、ディレクティブのリンクフェーズでhtml をフェッチしていると思います 。この回答の違いについては良い説明がありますが、ほとんどこれです：

DOM 変換を行う場合、いくつかの機能を追加する場合はコンパイルする必要があります。これは動作の変更であり、リンクする必要があります。

そのロジックのほとんどをディレクティブからコントローラーに移動することをお勧めします。つまり、$resource または $http サービスを使用してデータをフェッチし、その結果を ng-directive の新しく作成されたスコープに渡します。

于 2013-02-28T19:41:57.613 に答える
2

サービスを探しているかどうかわかりません$http。最初の 3 つのステップはカバーしていませんが、必要な 4 番目のステップをカバーしています。

plunker で「Click here to submit the form」というテキストをクリックすると、新しいテキストが挿入されていることに注意してください。この新しいテキストは、 という外部ファイルからのものですtmpl.html。firebug コンソールでは、テキストをクリックした後に get 呼び出しが行われ、tmpl.html

于 2013-03-01T02:57:57.433 に答える