CODEWITHSUNDEEP
jqueryhtmlangularjs
Basilf
Basilf

Reputation: 461

ui-view and jquery scripts

I use angular-ui-router in my website and i load the views using the ui-view directive. I also use some JQUERY scripts to manipulate the html DOM in the app views . The problem is that the JQUERY scripts fail if i insert them into my index.html page (after and before the ui-view directive). I am assuming that this has to do with the scripts order, or maybe it takes some time for the angular app to finish loading the template into the ui-view directive, and jumps too early to the jquery scripts, which causes errors. Is there any way i can solve this? Thank you,

Upvotes: 0

Views: 1315

Answers (2)

Kazeem Olanipekun
Kazeem Olanipekun

Reputation: 66

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
<!DOCTYPE html>
<!--[if lt IE 7]>      <html lang="en" ng-app="zeusWeb" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html lang="en" ng-app="zeusWeb" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html lang="en" ng-app="zeusWeb" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en" ng-app="zeusWeb" class="no-js"> <!--<![endif]-->
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Screening Manager</title>
  <meta name="keywords" content="education, institution, management, portal,screening,application">
  <meta name="description" content="education, institution, management, portal,screening,application">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
  <meta name="author" content="K-Devs System Solutions">
  <meta name="owner" content="Kazeem Olanipekun">
  <meta name="verified by" content="K-Devs System Solutions">
  <meta name="googlebot" content="noodp">
  <meta name="google" content="translate">
  <meta name="revisit-after" content="1 month">
  <!-- build:css css/main.css-->
  <!-- bower:css -->
  <link rel="stylesheet" href="bower_components/angular-loading-bar/build/loading-bar.css" />
  <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.css" />
  <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
  <link rel="stylesheet" href="bower_components/bootstrap-daterangepicker/daterangepicker.css" />
  <link rel="stylesheet" href="bower_components/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css" />
  <link rel="stylesheet" href="bower_components/animate.css/animate.css" />
  <link rel="stylesheet" href="bower_components/iCheck/skins/flat/blue.css" />
  <link rel="stylesheet" href="bower_components/nprogress/nprogress.css" />
  <link rel="stylesheet" href="bower_components/bootstrap-progressbar/css/bootstrap-progressbar-3.3.4.css" />
  <link rel="stylesheet" href="bower_components/switchery/dist/switchery.css" />
  <!--endbower-->
  <!--custom:css-->
  <link href="template.css" rel="stylesheet">
  <link rel="stylesheet" href="app.css">
  <!-- endcustom  css-->
  <!-- endbuild -->
  <link rel="shortcut icon" href="images/screening.ico" type='image/x-icon'/>
  <link rel="icon" href="images/screening.ico" type="image/x-icon"/>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body data-ng-controller="zeusWebCtrl" class="nav-md footer_fixed">
  <!--[if lt IE 7]>
      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
  <![endif]-->

  <data ui-view ng-cloak></data>

  <!-- build:js js/vendors.js-->
  <!-- bower:js -->
  <script src="bower_components/jquery/dist/jquery.js"></script>
  <script src="bower_components/angular/angular.js"></script>
  <script src="bower_components/angular-mocks/angular-mocks.js"></script>
  <script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
  <script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
  <script src="bower_components/angular-loading-bar/build/loading-bar.js"></script>
  <script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
  <script src="bower_components/moment/moment.js"></script>
  <script src="bower_components/bootstrap-daterangepicker/daterangepicker.js"></script>
  <script src="bower_components/jquery-mousewheel/jquery.mousewheel.js"></script>
  <script src="bower_components/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.js"></script>
  <script src="bower_components/iCheck/icheck.js"></script>
  <script src="bower_components/nprogress/nprogress.js"></script>
  <script src="bower_components/bootstrap-progressbar/bootstrap-progressbar.js"></script>
  <script src="bower_components/transitionize/dist/transitionize.js"></script>
  <script src="bower_components/fastclick/lib/fastclick.js"></script>
  <script src="bower_components/switchery/dist/switchery.js"></script>
  <!-- endbower -->
  <!-- endbuild -->


  <!-- build:js js/main.js-->
  <!-- code inclusion-->
  <script src="template.js"></script>
  <script src="scripts/index.js"></script>
  <script src="scripts/dashboard/dashboard.js"></script>
  <script src="app.js"></script>
  <!--end inclusion -->
  <!-- endbuild -->

</body>
</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
<div  class="container body">
    <div class="main_container">
        <!--sidebar-->
        <section  data-ng-include="'views/dashboard/sidebar-nav.html'" data-ng-controller="sideBarCtrl as vm"></section>
        <!--sidebar-->

        <!-- top navigation -->
        <section  data-ng-include="'views/dashboard/header.html'"></section>
        <!-- /top navigation -->

        <!-- page content -->
        <div class="right_col" role="main" ui-view="body">
            hey
          <!--  <script>template();</script>-->
        </div>
        <!-- /page content -->
        <!--footer-->
        <section  data-ng-include="'views/dashboard/footer.html'"></section>
        <!--footer-->
    </div>
</div>
<div data-ng-init="$parent.appTemplate()"></div>

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 <div data-ng-init="$parent.appTemplate()"></div> 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
<div  class="menu_section">
    <h3>Live On</h3>
    <ul class="nav side-menu">
        <li><a><i class="fa fa-bug"></i> Additional Pages <span class="fa fa-chevron-down"></span></a>
            <ul class="nav child_menu">
                <li><a href="e_commerce.html">E-commerce</a></li>
                <li><a href="projects.html">Projects</a></li>
                <li><a href="project_detail.html">Project Detail</a></li>
                <li><a href="contacts.html">Contacts</a></li>
                <li><a href="profile.html">Profile</a></li>
            </ul>
        </li>
        <li><a><i class="fa fa-windows"></i> Extras <span class="fa fa-chevron-down"></span></a>
            <ul class="nav child_menu">
                <li><a href="page_403.html">403 Error</a></li>
                <li><a href="page_404.html">404 Error</a></li>
                <li><a href="page_500.html">500 Error</a></li>
                <li><a href="plain_page.html">Plain Page</a></li>
                <li><a href="login.html">Login Page</a></li>
                <li><a href="pricing_tables.html">Pricing Tables</a></li>
            </ul>
        </li>
        <li><a><i class="fa fa-sitemap"></i> Multilevel Menu <span class="fa fa-chevron-down"></span></a>
            <ul class="nav child_menu">
                <li><a href="#level1_1">Level One</a>
                <li><a>Level One<span class="fa fa-chevron-down"></span></a>
                    <ul class="nav child_menu">
                        <li class="sub_menu"><a href="level2.html">Level Two</a>
                        </li>
                        <li><a href="#level2_1">Level Two</a>
                        </li>
                        <li><a href="#level2_2">Level Two</a>
                        </li>
                    </ul>
                </li>
                <li><a href="#level1_2">Level One</a>
                </li>
            </ul>
        </li>
        <li><a href="javascript:void(0)"><i class="fa fa-laptop"></i> Landing Page <span class="label label-success pull-right">Coming Soon</span></a></li>
    </ul>
</div>

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

<div data-ng-init="$parent.appTemplate()"></div>

Upvotes: 1

user3718908x100
user3718908x100

Reputation: 8509

Load the jquery script you want to load inside the partial html template: see here--> jquery layout not working while loading through ui-view

Upvotes: 0

Related Questions