jquery layout not working while loading through ui-view

Question

I have created a layout using JQuery layout. It is working fine if I use it in normal index file. But when I try to load through ui-view directory, it\'s not loading. Please hel

Answer 1

This is how I get it solved:

1. In your app.js, create is on controller,
2. add the controller name to your index body.
3. the convert the template js to a method.
4. then create a scope method in your app.js controller.
5. In the scope method, call the template js method.
6. Inside the ui-view html template or your dashboard. Use ng-init to call the scope method of your app.js controller using
   .

Here is the working example (index.html):

Here is the app.js:

    'use strict';
    // Declare app level module which depends on views, and components
    var zeusWeb=angular.module('zeusWeb', ['ui.router', 'angular-loading-bar','dashboard']);
    zeusWeb.config(['$stateProvider', '$urlRouterProvider','cfpLoadingBarProvider',function ($stateProvider, $urlRouterProvider,cfpLoadingBarProvider) {

      $urlRouterProvider.otherwise("/");
      /**
       *   State for the very first page of the app. This is the home page .
       */
      $stateProvider.state('home', {
        url: "/",
        templateUrl: 'views/dashboard/dashboard.html',
        controller: 'dashboardCtrl'
      });
    /*
      $stateProvider.state('dashboard', {
            url:'/dashboard',
            templateUrl: 'views/dashboard/dashboard.html',
            controller: 'dashboardCtrl',
            controllerAs:'vm'
      });*/

    /*
      $stateProvider.state('dashboard', {
        views:{
          'body':{
            url:'/embed',
            templateUrl: 'view1/embed.html',
            controller: 'embed',
            controllerAs:'vm'
          }
        }
      });*/

    }]);
    zeusWeb.controller('zeusWebCtrl',['$scope',function ($scope) {
      $scope.test = "Testing";
      $scope.appTemplate=function () {
      template();
      };

    }]);

Here is the embed ui-view dashboard.html:

    

        

            
            

            

            
            

            

            
            

                hey
              
            
            
            
            

            
        
    
    

Please note that if you are having an asynchronous inject sidebars html based on roles. make sure you have a default sidebar html that will put this

instead of the dashboard and also make sure that the default sidebar will be loaded last after all other sidebars has loaded successfully.

In my case, here is a sample example of the sidebars (school admin html sidebar):

    
Live On
    

        
 Additional Pages 
            

                
E-commerce
                
Projects
                
Project Detail
                
Contacts
                
Profile
            
        
        
 Extras 
            

                
403 Error
                
404 Error
                
500 Error
                
Plain Page
                
Login Page
                
Pricing Tables
            
        
        
 Multilevel Menu 
            

                
Level One
                
Level One
                    

                        
Level Two
                        
                        
Level Two
                        
                        
Level Two
                        
                    
                
                
Level One
                
            
        
        
 Landing Page Coming Soon
    

Then, let assume that is the last sidebar of the user, then you then call the default sidebar to call the function (default sidebar html):