打开 Modal 并更改 URL 而不更改 AngularJS 中的视图答案

【问题标题】：Open Modal and change URL without change the view in AngularJS打开 Modal 并更改 URL 而不更改 AngularJS 中的视图
【发布时间】：2014-10-20 16:34:39
【问题描述】：

我正在尝试使用 angularjs 打开一个模式。

我的任务列表路线是：

/client/:id/task/list

它工作正常。现在，我正在尝试在列表上方以模式显示任务信息。

我的路线是：

/client/:id/task/:id

如何打开列表视图上方的模式，更改 URL，但不更改视图？

我看到很多关于这个的话题，但没有解决方案。

谢谢。

【问题讨论】：

一个非常基本的问题：你使用的是ng-route还是ui-router？
您是否在使用诸如 bootstrap、jquery 等提供模态对话框的库。如果是这样，您可以向该路由发出 GET 或 POST 请求并使用响应填充对话框
我正在使用 ui-router。 @YoelNunez，我有模态对话框的所有数据，我的问题是显示模态而不更改内容，只需将模态放在视图上方并更改 url。
尝试查看this，特别是与“reloadOnSearch”有关的部分
@YoelNunez，这是一个选项，网址不会像 /client/1/task/1，而是 /client/1/task?taskId=1 这是我现在的第一个选项，如果我找不到另一个。

标签： javascript angularjs angular-ui-router

【解决方案1】：

您可以指定要显示为模态的状态，并在处理后返回到您想要的状态。例如；

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

  }).state("tasks.show", {
    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");
      });
    }
  });
});

相关在这里http://plnkr.co/edit/fCyrlH

【讨论】：

你的回答太棒了！非常简单易懂！谢谢！一个问题，我不能支持状态，结果。那么任何时候都不要开火。你知道为什么吗？
其实result.then中的回调成功并没有dispatch任何东西，而是第二个参数dispatch。 result.then(successCallback, errorBack).
编辑了插件。为了清楚起见，我添加了成功/解雇/最终处理程序和一些 cmets。