AngularJS and _target=self with routing

Question

A slightly odd question I know but I'm trying to figure out mixing angular routing with a standard page.

I have a menu system that has 4 items, only one has a target of _self, the routing is working correctly.

The page in question is my overall site layout page, what I'm trying to achieve is once I switch back with the menu to a page that is managed by angular routing all the content in the div with and id of "full-page-content" be removed.

 <div id="full-page-content">@RenderBody()</div>
 <ng-view></ng-view>

In the long run I'll let angular manage everything but I'm thinking about this from a migration perspective.

Thanks

Answer 1

Why not create a directive to do this that checks the current route, then clears if it changes to something other than the one not driven by angular.

Something like this:

app.directive("clearWhenNot", function($location){

  return {

    scope: { selfRoute: "@clearWhenNot" },    

    link: function (scope, element, attributes) {
      // watch location.path
      scope.$watch( 
        function (){ return $location.path(); }, 

        function(newVal, oldVal){
          // blank the html if the route isn't the _self one.
          if(newVal != scope.selfRoute){
            element.html('');
          }
        }
      );
    } 
  }

});

I haven't tested this, so let me know if it works - there may be typos!

EDIT to use it:

<div id="full-page-content" clear-when-not="somenonangularroute">
    @RenderBody()
</div>

Which would clear the page if you weren't at www.yourapp.com/somenonangularroute.