Javascript not accessible from inside Angular ui-view

Question

I have a main template (index.html) with an Angular ui-view. Inside this main template I import a bunch of Javascript files. I expect these files to be available to the cont

Answer 1

This is how i get it solved.

1. In your app.js, create is on controller,
2. add the controller name to ur 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 ur 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 insted 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

`enter code here

---