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.

Answer 2

Here is one option, wrap your default content with <script type="text/ng-template"> , then load that template into the ng-view via the default route.

html

<div ng-app="myApp">
    <div ng-view>
        <script id="bar.html" type="text/ng-template">
           <ul>
             <li> test1 </li>
             <li> test2 </li>
             <li> test3 </li>
             <li> test4 </li>
            </ul>
        </script>
    </div>
</div>

js

angular.module('myApp', ['ngRoute'], function($routeProvider, $locationProvider) 
{
    $routeProvider.when('/', { templateUrl: 'bar.html' });
});

There may be a nicer solution, but I'll need to work on that a bit more.

Answer 3

It will be a better solution combining the solutions of @towr and Answer to another question

angular.module('myApp', ['ngRoute'])
.directive('viewWithContent', ['$templateCache', function($templateCache)
{
    return {
        restrict: 'A',
        compile:  function (element)
        {
            $templateCache.put('initial-view.html', element.html());
        }
    };
}])
.config(function($routeProvider, $locationProvider) 
{
    var initialized = false;
    $routeProvider.when('/', {
        templateUrl: function(){
            if(initialized){ 
                return './views/route-url.html';
            }

            initialized = true;

            return 'initial-view.html';
        },
        controller: 'someController'
    });
});

Answer 4

don't forget to put priority more than 400 on the directive, because ng-view is executed with priority:400

example:

.directive('foo', ['$templateCache', function($templateCache){
return {
    restrict: 'A', 
    priority:500,
    compile:  function (element)
    {
        $templateCache.put('bar.html', element.html());
    }
};}])