javascript - Open Modal and change URL without change the view in AngularJS - Stack Overflow

admin管理员组

文章数量:1426506

I'm trying to open a modal with angularjs.

My route to task list is:

/client/:id/task/list

Its working fine. Now, i'm trying to show the task info in a modal, above the list.

My route for this is:

/client/:id/task/:id

How can i open the modal above the list view, change the URL, but don't change the view?

I saw a lot of topics about this, but with none solution.

Thanks.

I'm trying to open a modal with angularjs.

My route to task list is:

/client/:id/task/list

Its working fine. Now, i'm trying to show the task info in a modal, above the list.

My route for this is:

/client/:id/task/:id

How can i open the modal above the list view, change the URL, but don't change the view?

I saw a lot of topics about this, but with none solution.

Thanks.

• javascript
• angularjs
• angular-ui-router

Share Improve this question Follow edited Oct 20, 2014 at 16:45 Italo Borges asked Oct 20, 2014 at 16:34 Italo BorgesItalo Borges 2,55466 gold badges3838 silver badges4545 bronze badges 7

• a very basic question : you using ng-route or ui-router? – harishr Commented Oct 20, 2014 at 16:38
• are you using library such as bootstrap, jquery, etc. that offer modal dialogs. if so you can make a GET or POST request to that route and populate the dialog with the response – Yoel Nunez Commented Oct 20, 2014 at 16:38
• i'm using ui-router. @YoelNunez, i have all the data for modal dialog, my problem is show the modal without change the content, just put the modal above the view and change the url. – Italo Borges Commented Oct 20, 2014 at 16:42
• try looking at this specifically at the part that has to do with "reloadOnSearch" – Yoel Nunez Commented Oct 20, 2014 at 16:47
• @YoelNunez, this is an option, the url will not be like /client/1/task/1, but like /client/1/task?taskId=1 This is my first option now if i can't find another one. – Italo Borges Commented Oct 20, 2014 at 17:18

 |  Show 2 more ments

1 Answer 1

Sorted by: Reset to default 4

You can specify states you want to show as modal and when handled, return to state you want to. For example;

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

---

Related plunker here http://plnkr.co/edit/fCyrlH

本文标签： javascriptOpen Modal and change URL without change the view in AngularJSStack Overflow