I am creating an application that has a detailed view that appears as a modal window above the main view. Each one has a URL, but if accessing the detailed view from the URL directly, I want it to be presented as the main view. This metaphor is used in many applications, but the pinterest pin is a classic example (try clicking a kick, then reload the page to see the difference).
From what I put together, a regular router is not powerful enough to handle this, so I wrote my own directive to replace ng-view. Here's a simplified code example:
app.directive('myModalView', ['$route', function($route) { return { link: function(scope, elem, attr) { var data = { modal: false }; var first = true; scope.data = data; scope.$on('$routeChangeSuccess', function() { var current = $route.current.$$route; var template = current.templateUrl; data.modal = current.modal && !first; data.modal ? data.modalTemplate = template : data.mainTemplate = template; first = false; }); }, template: '<div ng-include src="data.mainTemplate"></div>' + '<div ng-show="data.modal" ng-include src="data.modalTemplate"></div>', }; }]);
Two questions:
- Is this the right approach? Is there an “angular” way to do this?
- The above code has a key problem: if two URLs use the same pattern, ng-include is not updated. In some situations, my controllers check the URL parameters during initialization and provide different data for presentation. Is there a way to update ng-include, reinitialize the controller, or do something else to handle this situation?
Thanks!
source share