jquery layout not working while loading through ui-view

前端未结

关注

 4  1180

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

相关标签:

4条回答

死守一世寂寞

2021-01-27 15:58

The issue is that .layout is called before the element #container exists.

The correct solution for this would be to create a directive for the 'layout' function and apply that directive to the element you want to set the layout to.

0 讨论(0)
发布评论:

提交评论
- 加载中...

故里飘歌

2021-01-27 16:03

You should try your code after angular DOM is ready

angular.element(document).ready(function () {
    myLayout = $('#container').layout({west_size:400,
      west_minSize:100
    });
});

0 讨论(0)

陌清茗

2021-01-27 16:03

Include your script inside your home.html partial template, that should work, had a similar issue, my guess is that that particular dom element does not exist when your function is initially executed.

home.html

<script type="text/javascript">
var mylayout;
$(document).ready(function(){
myLayout = $('#container').layout({west_size:400,
west_minSize:100
});
})
</script>

<div id="container" ng-controller="smpCTRL">
<div class="pane ui-layout-west">WEST</div>
<div class="pane ui-layout-center">CENTER</div>
</div>

0 讨论(0)

时光取名叫无心

2021-01-27 16:13

This is how I get it solved:

In your app.js, create is on controller,
add the controller name to your index body.
the convert the template js to a method.
then create a scope method in your app.js controller.
In the scope method, call the template js method.
Inside the ui-view html template or your dashboard. Use ng-init to call the scope method of your app.js controller using <div ng-init='$parent.appTemplate()'></div>.

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> 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):

<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>

0 讨论(0)