Stop Angular JS ng-view from wiping the page out

Question

Okay, I need to be able to stop ng-view from wiping the content away, I need to have the ng-view there since it's the only place it goes where it doesn't (and can't) nuke the whole application.

I have a scroller inside of it but the contents change when a person does a search (the whole point of the app is to search) but just loading the page up Angular empties the ng-view.

Any way to stop that default behaviour?

Answer 1

A different (and perhaps nicer*) approach is to use a directive to take the content of the ng-view and store it as a template before it's compiled (and cleared).

angular.module('myApp', ['ngRoute'])
.directive('foo', ['$templateCache', function($templateCache)
{
    return {
        restrict: 'A',
        compile:  function (element)
        {
            $templateCache.put('bar.html', element.html());
        }
    };
}])
.config(function($routeProvider, $locationProvider) 
{
    $routeProvider.when('/', { templateUrl: 'bar.html' });
});

This way you don't need to wrap the content of the ng-view in script tags.

<div ng-app="myApp">    
    <div foo ng-view>
        <ul>
            <li> test1 </li>
            <li> test2 </li>
            <li> test3 </li>
            <li> test4 </li>
        </ul>
    </div>
</div>

http://jsfiddle.net/3Dmv4/

*) I'm fairly new at angular myself, so I'm not deep enough in the angular mindset to know if it entirely "proper" to do these things.