$routeProvider - 具有不同 URL 的单个页面的模态

Question

我有一个页面中显示的项目列表。这个想法是点击一个项目，然后打开一个显示所选项目信息的模式，并且在后台保留列表。当模式打开时，URL 应该改变。因此，我们的想法是为每个项目设置一个特定的 URL，因此当您访问 url 时，您应该会看到模式、项目信息和主页背景。

I'm using $routeProvider for routing.

Example:

I would like to have something similar to this

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'
    })

/meal/:mealId 应该在模式中显示，URL 应该在模式打开时改变。

我搜索了很多，但找不到合适的答案。

感谢帮助！！

Answer 1

您可以指定要显示为模态的状态以及处理时，return 指定您想要的状态。例如：-

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");
  });
  }
 });
 });

这是它的 plunker 代码：code 我也会编辑我对 routeProvider 的回答。

$routeProvider - 具有不同 URL 的单个页面的模态

$routeProvider - modal of a single page with different URL

routes

modal-dialog

angularjs

route-provider