Okno dialogowe AngularJS show z routeProvider

Question

Czy można [wykonać funkcję] np. otworzyć modalne okno dialogowe od routeProvider, gdy zażądano określonej trasy?

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: Chcę odwołać trasę i zamiast otworzyć okno dialogowe. Otwarcie okna dialogowego nie jest jedynym problemem. Anulowanie trasy jest głównym problemem.

Answer 1

Możesz przekazać swoją funkcję jako zależność w determinacji i będzie czekać aż zależność jest rozwiązany i kiedy dialog kończy następnie zmienić trasę i zmieniać historię, jak chcesz przy użyciu $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

Myślę, że powinieneś umieścić to w kontrolerze i odwrócić flagę modelu, aby widok wiedział, że powinno być wyświetlone okno dialogowe. W kanciastym wszystko jest napędzane przez model.

Upewnij się, że uwzględnienie tego w module:

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

Dodaj kontroler, który będzie fireup swoje okno.

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

Możesz przekierować trasę do tej samej częściowej. Możesz to zrobić, obserwując zmianę trasy, korzystając z poniższego kodu. Możesz także wyświetlić okno dialogowe stąd.

$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

Opierając się na Odpowiedź Rishabha i użycie lokalizacji sergey.skipReload od this Angular Issue możesz użyć następujących opcji, aby utworzyć okno dialogowe zmiany trasy, odroczyć zmianę adresu URL na czas nieokreślony (w efekcie "anulowanie" zmiany trasy) i przepisać pasek adresu URL z powrotem na "/"bez powodowania ponownego przeładowania:

//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: '/' 
     }); 

Wydaje się, że wycieknie to nierozwiązane obietnice, i może pojawić się lepsze rozwiązanie, ale zadziałało to dla moich celów.