$ routeProvider - modal einer einzelnen Seite mit anderer URL

Question

Ich habe eine Liste von Elementen auf einer Seite angezeigt. Die Idee ist, auf ein Element zu klicken und ein Modal zu öffnen, das die Informationen des ausgewählten Elements anzeigt, und im Hintergrund bleibt die Liste. Wenn sich das Modal öffnet, sollte sich die URL ändern. Die Idee wäre also, für jedes Element eine bestimmte URL zu haben. Wenn Sie also auf die URL zugreifen, sollten Sie das Modal mit den Artikelinformationen und im Hintergrund die Hauptseite sehen.

I'm using $routeProvider for routing. 

Beispiel:

Ich mag würde, etwas haben ähnlich wie diese

http://www.eltrecetv.com.ar/articulo/le-salio-del-alma-el-emotivo-recuerdo-de-la-china-suarez-para-su-papa-en-una-fecha_087466

.config(function ($routeProvider) { 
    $routeProvider 
    .when('/', { 
     templateUrl: 'views/main.html', 
     controller: 'MainCtrl' 
    }) 
    .when('/meals', { 
     templateUrl: 'views/meals/meals.html', 
     controller: 'MealsCtrl' 
    }) 
    .when('/meal/:mealId', { 
     templateUrl: 'views/meals/meal-profile.html', 
     controller: 'MealCtrl' 
    }) 

Die /meal /: mealId sollte in einem modalen angezeigt werden, und die URL sollte sich ändern, wenn das Modal geöffnet wird.

Ich habe viel gesucht, aber ich konnte keine passende Antwort dafür finden.

Danke für die Hilfe !!

Answer 1

Sie können Zustände angeben, die als modal angezeigt werden sollen, und bei der Bearbeitung in den gewünschten Status zurückkehren. Zum Beispiel: -

app.config(function ($stateProvider) {  
$stateProvider.state('tasks', { 
url: '/tasks', 
templateUrl: 'tasks.html', 
controller: 'TasksCtrl' 

url: "/tasks/:id", 
onEnter: function($stateParams, $state, $modal) { 
    $modal.open({ 
    templateUrl: "show.html", 
    resolve: {}, 
    controller: function($scope, $state) { 
     $scope.ok = function() { 
     $scope.$close(); 
     };    
     $scope.dismiss = function() { 
     $scope.$dismiss(); 
     }; 
    } 
    }).result.then(function (result) { 
    // $scope.$close 
    }, function (result) { 
    // $scope.$dismiss 
    }).finally(function() { 
    // finally 
    return $state.transitionTo("tasks"); 
    }); 
    } 
}); 
}); 

Hier ist Plunker Code dafür: auch code ich meine Antwort für routeProvider bearbeiten wird.