javascript - Loading state as a modal overlay in AngularJS -

i want load state modal can overlay state without effecting other states in application. example if have link like:

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

i want interrupt state change using 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 prevents state change , loads url , appends modal application. the problem loads entire application again...

how can load state? e.g. template files , 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 should work using jquery: http://dev.driz.co.uk/angularmodal

see how can access statea , stateb loading via ajax uses history api change url reflect current state change.

and regardless of whether on index, statea or stateb can load statea or stateb modal (even if i'm on state already) , doesn't change url or current content, overlays state content.

this want able in angularjs.

note. example doesn't work browser , forward buttons due being quick example , not using history api correctly.

i've seen question few days ago , seemed interesting enough try , set work.

i've taken uisref directive start, , modified code use angular-bootstrap's $modal show 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 <a ui-sref-modal="notes.add">add note</a>

directive requires angular-bootstrap resolve modal dialog. need require ui.router.modal module in app.