3

オーバーフロー！

初めて Angular Material サイトを構築していますが、ダイアログ ボックス機能に問題があるようです。モバイルデバイス以外では、ボックスを表示して閉じることができます。つまり、ユーザーが電話の「クリア」または「戻る」ボタンを押したときです。これを行っても (またはブラウザの [戻る] ボタンをクリックしても)、ダイアログ ボックスには影響しません。表示されたままになり、入力を待っています。ESC キーを押すと閉じます。電話を使用している人は誰でも、本能的にそれをクリアできると思うでしょう。私の意見では、そうすべきです。私はあらゆる種類のさまざまな方法を試しましたが、うまくいかず、適切に実装していません。それで、ここに行きます..

コントローラ：

'use strict'; 
app.controller('NavCtrl', function ($scope, $mdDialog) {    
$scope.itworked = "Angular Successful";
var dialogContent = ' \
    <md-content> \
      <div class="diagtest">Content</div> \
        <p class="awesome"><a href="#/" ng-click="hide()">This link works</a></p> \
        <p><a href="#/portfolio" ng-click="hide()">This link also works</a></p> \
        <p>filler</p> \
    </md-content> \
';
var noForm = '<md-dialog id="navDialog">' + dialogContent + '</md-dialog>';
var formAround = '<form ng-submit="hide()"><md-dialog>' + dialogContent + '</md-dialog></form>';
var formInside = '<md-dialog><form ng-submit="hide()">' + dialogContent + '</form></md-dialog>';

function makeDialog(tmpl) {
    return function(ev) {
        $mdDialog.show({
            template: tmpl,
            targetEvent: ev,
            controller: 'DialogController'
        });
    };
}
$scope.dialogNoForm = makeDialog(noForm);
$scope.dialogFormAround = makeDialog(formAround); \\ This is for future use
$scope.dialogFormInside = makeDialog(formInside); \\ so is this...
});
app.controller('DialogController', function($scope, $mdDialog) {
$scope.hide = function() {
    $mdDialog.hide($scope.participant);
};
$scope.cancel = function() {
    $mdDialog.cancel();
};
});

誰でも提案できるものは何でも試してみたいと思っています。

私は次のことを試しました：

setCancellable(true)

また、「ナビゲーション」トリックを使用して、戻るボタンが押された場合にダイアログ ボックスを閉じようとしましたが、機能しませんでした。

公式ドキュメント サイトで、同じ機能を持つ例を見ることができます。ダイアログを確認すると、それらの機能がまったく同じであることがわかります。

https://material.angularjs.org/#/demo/material.components.dialog

それらは少し異なって書かれていますが、私のようにデスクトップと電話で同じように動作します.

光を当てることができる人に前もって感謝します！それは有り難いです！

4

3 に答える 3

7

私はこれが答えが少し遅れていることを知っています。

私は同じ問題を抱えていましたが、ルーティングイベントを利用することで解決できました。ルーティングが変更されたら、mdDialog を閉じます

サンプルコード。appアプリの起動時にAngularアプリコードが登録されていますか

function appRun($rootScope, $mdDialog) {

    $rootScope.$on('$stateChangeSuccess',
        function (event, toState, toParams, fromState) {

            //close any open dialogs
            $mdDialog.cancel();
        });

}

app.run(['$rootScope', '$mdDialog', appRun]);

乾杯

于 2016-01-17T22:45:29.447 に答える
0

次の行を に追加しますapp.run(..) 。
$locationProvider.html5Mode(true)

于 2015-06-11T12:50:13.647 に答える