routeProviderからのAngularJSショーダイアログ

Question

[関数の実行]は可能ですか？特定のルートが要求されたときに、routeProviderからモーダルダイアログウィンドウを開きますか？

myApp.config(function($routeProvider) { 
    $routeProvider 
     .when('/home', 
      { 
       controller: 'HomeCtrl', 
       templateUrl: 'Home/HomeView.html' 
      } 
     ).when('/profile/:userId/changepwd', 
      function(){     
       $dialog.messageBox(title, msg, btns) 
        .open() 
        .then(function(result){ 
        alert('dialog closed with result: ' + result); 
       }); 
      } 
     ).otherwise({ redirectTo: '/home' }); 
}); 

PS：私はルートをキャンセルし、代わりに、ダイアログボックスを開きたいです。ダイアログボックスを開くことは唯一の問題ではありません。ルートをキャンセルすることが大きな課題です。

Answer 1

あなたは決意に依存関係としてあなたの関数を渡すことができますし、依存関係が解決し、あなたのダイアログが終了したときに、その後のルートを変更し、あなたが$location

の構築

var app = angular.module('myApp', []) 
    .config(['$routeProvider', function($routeProvider) { 
    $routeProvider.when('/view1', { 
     template: '&nbsp', 
     controller: //empty function, 
     resolve: { 
     data1 : function($dialog, $location) { 
        var promise = $dialog.messageBox(title, msg, btns) 
          .open() 
          .then(function(result){ 
           alert('dialog closed with result: ' + result); 
           //Use [$location][1] to change the browser history 
          }); 
        return promise; 
       } 
     } 
    }); 
}]); 

Answer 2

私は、これをコントローラに入れ、モデルのフラグを反転して、ダイアログを表示するようにする必要があると考えます。角度では、すべてがモデルによって駆動されます。

あなたのモジュールでこれを必ず含めてください：

angular.module('youmodulename', ['ui.bootstrap']); 

があなたのダイアログをfireupますコントローラを追加します。

function DialogCtrl ($scope, $location, $dialog) { 
    $scope.openMsgBox = function() { 
    var btns = [{result:'cancel', label: 'Cancel'}, 
       {result:'ok', label: 'OK', cssClass: 'btn-primary'}]; 
     $dialog.messageBox('title', 'msg', btns) 
        .open() 
        .then(function(result){ 
        alert('dialog closed with result: ' + result); 
     }); 
    }(); 
} 

Answer 3

ルートを同じ部分にリダイレクトできます。これは、次のコードを使用してルートの変更を監視することで実行できます。ここからダイアログを表示することもできます。

$rootScope.$on('$routeChangeStart', function(event, next, current) { 

    if (next.templateUrl == "xyz.html") { 
     //other validation logic, if it fails redirect user to the same page 
     $location.path("/home"); 
    }   
}); 

Answer 4

を使用して望むように歴史を修正されるまで待機しますRishabhの答え、sergeyのlocation.skipReloadをthis Angular Issueから使用すると、ルート変更に関するダイアログを作成し、URL変更を無期限に延期し（実際にはルート変更をキャンセルする）、URLバーを '/'別の再読み込みを行わずに：

//Override normal $location with this version that allows location.skipReload().path(...) 
// Be aware that url bar can now get out of sync with what's being displayed, so take care when using skipReload to avoid this. 
// From https://github.com/angular/angular.js/issues/1699#issuecomment-22511464 
app.factory('location', [ 
    '$location', 
    '$route', 
    '$rootScope', 
    function ($location, $route, $rootScope) { 
    $location.skipReload = function() { 
     var lastRoute = $route.current; 
     var un = $rootScope.$on('$locationChangeSuccess', function() { 
     $route.current = lastRoute; 
     un(); 
     }); 
     return $location; 
    }; 
    return $location; 
    } 
]); 


app 
    .config(['$routeProvider', function ($routeProvider) { 
    $routeProvider 
     .when('/home', { 
     controller: 'HomeCtrl', 
     templateUrl: 'Home/HomeView.html' 
     }) 
     .when('/profile/:userId/changepwd', { 
     template: ' ', 
     controller: '', 
     resolve: { 
      data1: function($dialog, location, $q){ 
      $dialog.messageBox(title, msg, btns) 
      .open() 
      .then(function(result){ 
       //fires on modal close: rewrite url bar back to '/home' 
       location.skipReload().path('/home'); 

       //Could also rewrite browser history here using location? 
       }); 

      return $q.defer().promise; //Never resolves, so template '&nbsp' and empty controller never actually get used. 
      } 
     } 
     }) 
     .otherwise({ 
     redirectTo: '/' 
     }); 

これは解決されていない約束が漏れているように感じるし、きれいな解決策があるかもしれないが、これは私の目的のために働いた。