Logo Questions Linux Laravel Mysql Ubuntu Git Menu

Stop Angular JS ng-view from wiping the page out

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?

like image 829
Dave Mackintosh Avatar asked Dec 26 '22 16:12

Dave Mackintosh

1 Answers

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>
            <li> test1 </li>
            <li> test2 </li>
            <li> test3 </li>
            <li> test4 </li>


*) 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.

like image 98
towr Avatar answered Dec 28 '22 05:12