打开模态并更改URL而不更改AngularJS中的视图

时间:2014-10-20 16:34:40

标签: javascript angularjs angular-ui-router

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

我到任务列表的路线是:

/client/:id/task/list

工作正常。 现在,我试图在列表上方的模式中显示任务信息。

我的路线是:

/client/:id/task/:id

如何在列表视图上方打开模式,更改URL,但不更改视图?

我看到很多关于此的话题,但没有解决方案。

感谢。

1 个答案:

答案 0 :(得分:4)

您可以指定要显示为模态的状态,在处理时,返回到您想要的状态。例如;

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

<小时/> 此处相关 plunker http://plnkr.co/edit/fCyrlH

imgur