My state changes but the page is not refreshing properly

0
votes

I have 4 pages in my application:

  1. login.html: full body login page.
  2. base.html: just simple page contains ui-view tag only to accommodate other views.
  3. main.html: contains menu header footer
  4. dashboard: contains some panels charts etc

Following is how I declared the routes:

$stateProvider

    .state('base', {
        abstract: true,
        templateUrl: 'tpl/base.html'
    })

    .state('base.main', {
        abstract: true,
        templateUrl: 'tpl/main-layout.html',
    })

    .state('base.login', {
        url: '/login',
        templateUrl: 'views/login.html',
        data: {
            pageTitle: 'Login',
            pageSubTitle: '',
        }
    })

    // Dashboard
    .state('base.main.dashboard', {
        url: "/dashboard",
        templateUrl: "views/dashboard.html",            
        data: {
            pageTitle: 'Dashboard',
            pageSubTitle: ''
        }
    })

The problem is these states are working fine; I am able to switch to any pages, but in the login page I have used jQuery backstretch plugin to show some image in the background.

So when I switch to other routes (such as dashboard) from login, other state pages show up fine, but the background image from login is still applied. If I refresh the page, then only that image get removed, and the original background for dashboard is displayed (original background is just a grey color defined in main-layout.html)

Can some one explains why background for login still visible on separate pages?

1
jqueryhtmlcssangularjsangular-ui-router
You speak of the jquery backstretch plugin but you have not mentioned how you are using the plugin. Add code for that as well. - callmekatootie
Your problem is almost undoubtedly to do with the jQuery plugin... if you're going to do anything that manipulates the DOM (which it sounds like this does) it should be done in a directive, many many many jQuery things have been wrapped up into jQuery/Angular directives that you can drop in add as a dependency and use but if one doesn't exist for this building them isn't super difficult (understand the angular DDO is but you don't need to fully understand that to get it working). github.com/rprovost/ng-backstretch (google angular backstretch) - shaunhusain
jquery backstretch is used inside login view like this <script> jQuery(document).ready(function() { // init background slide images $.backstretch([ "theme/assets/admin/pages/media/bg/1.jpg", "theme/assets/admin/pages/media/bg/2.jpg", "theme/assets/admin/pages/media/bg/3.jpg", "theme/assets/admin/pages/media/bg/4.jpg" ], { fade: 1000, duration: 8000 } ); }); </script> - Atul Nar

1 Answers

0
votes

I know you can add a property to the target destination states ->

{
  reload: true
}

As to why it is persisting, depends on how you are handling (or not) the scope of various states in the controllers.