2

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.

Italo Borges
  • 2,355
  • 5
  • 34
  • 45
  • a very basic question : you using ng-route or ui-router? – harishr Oct 20 '14 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 Oct 20 '14 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 Oct 20 '14 at 16:42
  • try looking at [this](http://stackoverflow.com/questions/14974271/can-you-change-a-path-without-reloading-the-controller-in-angularjs) specifically at the part that has to do with "reloadOnSearch" – Yoel Nunez Oct 20 '14 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 Oct 20 '14 at 17:18
  • Why don't you use `/client/:id/task/` for the list state, that way you can then have the `/client/:id/task/:id` be a sub state – JoseM Oct 20 '14 at 17:52
  • @JoseM, you're right. Because the /list, the modal wasn't working. I changed and now is working above the content. Thanks!!! – Italo Borges Oct 20 '14 at 18:43

1 Answers1

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

imgur

Mikko Viitala
  • 8,344
  • 4
  • 37
  • 62
  • Your answer was awesome! Very simple to understand! Thanks! One question, I can't back the state, the result.then don't fire any time. Do you know why? – Italo Borges Oct 20 '14 at 18:45
  • Actually, the callback success in result.then doensn't dispatch anything, but the second parameter dispatch. result.then(successCallback, errorBack). – Italo Borges Oct 20 '14 at 19:06
  • Edited the plunker. I added success/dismissed/finally handlers and some comments for clarity. – Mikko Viitala Oct 20 '14 at 19:26