web-dev-qa-db-ja.com

$ mdDialog.confirm()とカスタムtemplateUrl

アプリケーションで$ mdDialogを使用していますが、通常のダイアログではなく「確認」ダイアログとして使用したいと思います。つまり、ユーザーが確認ダイアログの2つのボタンのいずれかをクリックするまで、コードフローは続行されません。 $ mdDialog.confirm()を使用できることに気付きましたが、カスタムのtemplateUrlと対応するコントローラーをダイアログのコンテンツとして使用する方法がわかりません。

以下は、ダイアログに関しては問題なく動作するように書いたものですが、ダイアログを開いた後もコードフローが停止しません。 Okまたはユーザーが[キャンセル]をクリックするまで停止します。

$mdDialog.show({
      controller: 'incomingCallDialogController',
      templateUrl: 'app/components/others/incomingCallDialog/incomingCallDialog.tpl.html',
      locals: {message: message},
      parent: angular.element(document.body)
   }).then(function (answer) {
      console.log("here");
   }
10
Developer

基本的には次のようになります。

var confirm = $mdDialog.confirm({
      controller: 'incomingCallDialogController',
      templateUrl: 'app/components/others/incomingCallDialog/incomingCallDialog.tpl.html',
      locals: {message: message},
      parent: angular.element(document.body)
   })
   $mdDialog.show(confirm).then(function() {
      console.log("here");
   }

これが codepen です。

11
Daniel

Angular Jsは、マテリアルUiとアイコン/画像を使用してダイアログデザインを確認します

Screenshot : https://i.stack.imgur.com/rghwX.png

Online demo : https://codepen.io/MuhammadRizwan/pen/aYBKqW?editors=1010
0
Rizo

これを試して

                $scope.showTimContent = function (tim) {
                    $mdDialog.show({
                        controller: ['$scope', '$mdDialog', 'tim', $scope.ViewTimContentCtrl],
                        templateUrl: 'wgt/tim/TimContentDialog.html',
                        locals: {'tim': tim},
                        clickOutsideToClose: true,
                    });
                };

                $scope.ViewTimContentCtrl = function ($scope, $mdDialog, tim) {
                    $scope.tim = tim;
                    $scope.hide = function () {
                        $mdDialog.hide();
                    };
                    $scope.cancel = function () {
                        $mdDialog.cancel();
                    };
                };
0
Stan Sokolov