Loading state as a modal overlay in AngularJS

Question

I want to load a state as a modal so that I can overlay a state without effecting any other states in my application. So for example if I have a link like:

<a ui-sref="notes.add" modal>Add Note</a>

I want to then interrupt the state change using a directive:

.directive('modal', ['$rootScope', '$state', '$http', '$compile',
    function($rootScope, $state, $http, $compile){
        return {
            priority: 0,
            restrict: 'A',
            link: function(scope, el, attrs) {  
                $rootScope.$on('$stateChangeStart', function (event, toState, toParams) {
                    event.preventDefault();
                }); 
                el.click(function(e){
                    $http
                    .get('URL HERE')
                    .then(function(resp){
                        $('<div class="modal">' + resp.data + '</div>').appendTo('[ui-view=app]');
                        setTimeout(function(){
                            $('.wrapper').addClass('showModal');
                        },1);
                    });
                }); 
            }   
        }
    }
])

This successfully prevents the state change and loads the URL and appends it as a modal to the application. The problem is that it loads the entire application again...

How can I load just the state? e.g. the template files and the adjoining controller.

The state looks like:

.state('notes.add',
{
    parent: 'notes',
    url: '/add',
    views: {
        'content': {
            templateUrl: 'partials/notes/add.html',
            controller: 'NotesAddCtrl'
        }
    }
})

---

An example of how it should work using jQuery: http://dev.driz.co.uk/AngularModal

See how I can access StateA and StateB loading via AJAX that uses the History API to change the URL to reflect the current state change.

And regardless of whether I am on the index, StateA or StateB I can load StateA or StateB as a modal (even if I'm on that State already) and it doesn't change the url or the current content, it just overlays the state content.

This is what I want to be able to do in AngularJS.

Note. this example doesn't work with the browser back and forward buttons due to it being a quick example and not using the history api correctly.

Answer 1

I've seen your question a few days ago and it seemed interesting enough to try and set up something that would work.

I've taken the uiSref directive as a start, and modified the code to use angular-bootstrap's $modal to show the desired state.

angular.module('ui.router.modal', ['ui.router', 'ui.bootstrap'])
.directive('uiSrefModal', $StateRefModalDirective);

function parseStateRef(ref, current) {
  var preparsed = ref.match(/^\s*({[^}]*})\s*$/), parsed;
  if (preparsed) ref = current + '(' + preparsed[1] + ')';
  parsed = ref.replace(/\n/g, " ").match(/^([^(]+?)\s*(\((.*)\))?$/);
  if (!parsed || parsed.length !== 4) throw new Error("Invalid state ref '" + ref + "'");
  return { state: parsed[1], paramExpr: parsed[3] || null };
}

function stateContext(el) {
  var stateData = el.parent().inheritedData('$uiView');

  if (stateData && stateData.state && stateData.state.name) {
    return stateData.state;
  }
}

$StateRefModalDirective.$inject = ['$state', '$timeout', '$modal'];

function $StateRefModalDirective($state, $timeout, $modal) {
  var allowedOptions = ['location', 'inherit', 'reload'];

  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      var ref = parseStateRef(attrs.uiSrefModal, $state.current.name);
      var params = null, url = null, base = stateContext(element) || $state.$current;
      var newHref = null, isAnchor = element.prop("tagName") === "A";
      var isForm = element[0].nodeName === "FORM";
      var attr = isForm ? "action" : "href", nav = true;

      var options = { relative: base, inherit: true };
      var optionsOverride = scope.$eval(attrs.uiSrefModalOpts) || {};

      angular.forEach(allowedOptions, function(option) {
        if (option in optionsOverride) {
          options[option] = optionsOverride[option];
        }
      });

      var update = function(newVal) {
        if (newVal) params = angular.copy(newVal);
        if (!nav) return;

        newHref = $state.href(ref.state, params, options);

        if (newHref === null) {
          nav = false;
          return false;
        }
        attrs.$set(attr, newHref);
      };

      if (ref.paramExpr) {
        scope.$watch(ref.paramExpr, function(newVal, oldVal) {
          if (newVal !== params) update(newVal);
        }, true);
        params = angular.copy(scope.$eval(ref.paramExpr));
      }
      update();

      if (isForm) return;

      element.bind("click", function(e) {
        var button = e.which || e.button;
        if ( !(button > 1 || e.ctrlKey || e.metaKey || e.shiftKey || element.attr('target')) ) {
          e.preventDefault();

          var state = $state.get(ref.state);
          var modalInstance = $modal.open({
            template: '<div>\
              <div class="modal-header">\
                <h3 class="modal-title">' + ref.state + '</h3>\
              </div>\
              <div class="modal-body">\
                <ng-include src="\'' + state.templateUrl + '\'"></ng-include>\
              </div>\
            </div>',
            controller: state.controller,
            resolve: options.resolve
          });

          modalInstance.result.then(function (selectedItem) {
            $scope.selected = selectedItem;
          }, function () {
            console.log('Modal dismissed at: ' + new Date());
          });
        }
      });
    }
  };
}

You can use it like this <a ui-sref-modal="notes.add">Add Note</a>

Directive requires the angular-bootstrap to resolve the modal dialog. You will need to require the ui.router.modal module in your app.

Answer 2

Since asked to provide an example for my comment,

Example Directive

  myapp.directive('openModal', function ($modal) {
    return function(scope, element, attrs) {
      element[0].addEventListener('click', function() {
        $modal.open({
          templateUrl : attrs.openModal,
          controller: attrs.controller,
          size: attrs.openModalSize,
          //scope: angular.element(element[0]).scope()
        });
      });
    };
  });

Example Html

<button 
  open-modal='views/poc/open-modal/small-modal.html'
  open-modal-size='sm' 
  controller="MyCtrl">modal small</button>

The above directive approach is not very different from using a state, which has templateUrl and controller except that url does not change.

.state('state1.list', {
  url: "/list",
  templateUrl: "partials/state1.list.html",
  controller: function($scope) {
    $scope.items = ["A", "List", "Of", "Items"];
  }
})

Answer 3

Apparently there is the issue Ui-sref not generating hash in URL (Angular 1.3.0-rc.3) refering to https://github.com/angular-ui/ui-router/issues/1397

It is seems to be fixed as per comments.

I personally dislike html5mode because it requires extra work on your server for no apparent advantage (I don't regard having "more beautiful url" as tangible advantage to justify the extra work).

There is another performance problem when using routers, that the view DOM is re-created upon each route change. I mentioned a very simple solution in this answer.

---

As a side remark, the example in http://dev.driz.co.uk/AngularModal/ does not behave quite well. It does not record history, so I can't go back. Further, if you click on links like Index or modals, and then reload, you don't get the same page.

---

UPDATE. It seems from the comments that a route change is not wanted when opening the modal. In that case the easiest solution is not to put ui-sref on the opening button and let the modal directive along handle it.