2016-05-10 7 views
4

角度のマテリアルで$ mdDialogウィンドウを作成しなければなりません。選択したアクションに基づいて、アプリは新しいレポートを生成するか、既存のレポートを読み込むか、ダイアログを完全にキャンセルします。問題は、$ mdDialogが.okオプションと.cancelオプションのみを持っていることです。あなたがAngular Materialサイトの文書を見ると(私はサイトからデモコードスニペットで印刷画面を添付しました)。

$mdDialog confirm demo code

だから今、私の質問は:私は私の$ mdDialogウィンドウに複数のアクションオプションを追加することができますか。また、コントローラのオプションに関数をどのように結び付けますか?たとえば、「新しいレポートを生成する」を選択すると、特定のサービスが起動しますが、「前のレポートを表示する」を選択すると、別のサービスが起動します。 これは初心者の質問ですが、この状況で正しいAngularJSロジックを完全に把握していないような気がします。

答えて

4

確認ダイアログにカスタムテンプレートを使用できます。

var confirm = $mdDialog.confirm({ 
     controller: DialogController, 
     templateUrl: 'dialog1.tmpl.html', 
     parent: angular.element(document.body), 
     targetEvent: ev, 
    }) 
    $mdDialog.show(confirm).then(function() { 
     $scope.status = 'Confirm resolved'; 
     $scope.codeRunningBeforeResolve = 'code only runs after resolve'; 
    }); 

Codepen

+0

あなたの答えをありがとう、Aseem!これは私がやったことです。私は非常に制限的な方法で解決策に近づいていました($ mdDialogをカスタマイズできるとは考えていません)。 –

+0

また、非常に重要です:別のファイルで定義されているコントローラを参照するときは、文字列(つまり、 'DialogController')として参照する必要があります。そうでない場合、AngularJSはUnknownProviderエラーを返します。 –

1

@Aseem、答えをあなたのコードをコピーして申し訳ありませんが、私はコメントでこれを行うことができませんでした。

Aseemの回答には1つ欠けています。関数を関数に追加すると、ユーザーがクリックしたボタンのキャプションが表示されます。我々は、この少しだけを変更するのであれば:

var confirm = $mdDialog.confirm({ 
    controller: DialogController, 
    templateUrl: 'dialog1.tmpl.html', 
    parent: angular.element(document.body), 
    targetEvent: ev, 
}) 
$mdDialog.show(confirm).then(function(answer) { 
    $scope.status = answer; 
    $scope.codeRunningBeforeResolve = 'code only runs after resolve'; 
}); 

あなたが複数のボタンだけOK以外の取得応答を処理またはキャンセルしたいかを見ることができます。

+0

ありがとうマイク、私はボタン選択をキャプチャする約束を使用することはなかった。 –

関連する問題