Here i created for simple form with validation, my requirement is i dont want html5 popup message but i need focus for particular valid field, how to do ?
Thanks for ur help in advanced .............................................
'use strict';
var app = angular.module('telstraApp', []);
app.directive('accessibleForm', function () {
return {
restrict: 'A',
link: function (scope, elem) {
// set up event handler on the form element
elem.on('submit', function () {
// find the first invalid element
var firstInvalid = elem[0].querySelector('.ng-invalid');
// if we find one, set focus
if (firstInvalid) {
firstInvalid.focus();
}
});
}
};
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>TelsApp</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!--<link data-require="bootstrap#*" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-select/0.13.2/select.min.css">
<script data-require="angular.js#~1.3.15" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.0/angular-sanitize.js"></script>
</head>
<body class="hold-transition skin-blue sidebar-mini" data-ng-app="telstraApp">
<div class="wrapper">
<div class="row" style=" position: relative; top: 0; height: 55px !important;z-index:9999;">
</div>
<!--<div id="header" ng-include="'layout/header/header.html'" ></div> -->
<!-- Left side column. contains the logo and sidebar -->
<aside class="main-sidebar" style=" height: 100%; top: 10px; height:0px; padding-top: 60px;">
</aside>
<div class="content-wrapper" style=" margin-top: -29px; margin-bottom: 10px; height: 350px; overflow-y: auto; ">
<!-- Main content -->
<form>
<input type="text" ng-required="true">
<input type="text" ng-required="false">
<input type="text" ng-required="true">
<input type="submit">
</form>
<!-- /.content -->
</div>
</div>
<!-- /.content-wrapper -->
<!-- /.Footer -->
<!-- /.Footer -->
<script data-require="jquery#1.11.0" data-semver="1.11.0" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</body>
</html>
<style>
.appBanner{
position:fixed; left:0; top: 0px; width: 1440px; border:2px; background-color:#6185BA;height: 46px;color: #000; font-family: 'Helvetica Neue', Arial, sans-serif;font-size: 12px;
}
</style>
In order to hide html5 validation messages, you have to specify novalidate on your form like this:
<form name='xyz' novalidate>
//your form
</form>
Read more about it here: disable html5 validations
You will have to specify autofocus on the input on which you want focus.
have a look at this fiddle where focus is on email input. focus with novolidate
Related
I use kendo editor to show html file using below code but problem is that it show line when I use tabel in html. Please find below output image:
I just want to remove line from table.
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/editor/angular">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.material.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2018.1.117/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.117/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.117/js/kendo.all.min.js"></script>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular-sanitize.js"></script>
<div id="example" ng-app="KendoDemos">
<div ng-controller="MyCtrl">
<textarea kendo-editor k-ng-model="html"></textarea>
<div class="box wide">
<textarea ng-bind-html="html" style="width: 100%; height: 5em"></textarea>
</div>
</div>
</div>
<script>
angular.module("KendoDemos", [ "kendo.directives", "ngSanitize" ])
.controller("MyCtrl", function($scope){
$scope.html = "<h1>Kendo Editor</h1>\n\n" +
"<p>Note that 'change' is triggered when the editor loses focus.\n" +
"<br /> That's when the Angular scope gets updated.</p>\n" +
"<table ><tr><td><strong>Test1 </strong></td></tr>" +
"<table ><tr><td><strong>Test2</strong></td></tr>" ;
})
</script>
</body>
</html>
You shouldn't use the table tag for each line.
Try this:
$scope.html = "<h1>Kendo Editor</h1>\n\n" +
"<p>Note that 'change' is triggered when the editor loses focus.\n" +
"<br /> That's when the Angular scope gets updated.</p>\n" +
"<table><tr><td><strong>Test1 </strong></td></tr>" +
"<tr><td><strong>Test2</strong></td></tr></table>" ;
I make a login page with angular
it seem like angular is not even loading in mobile i used a variable to test the angular is loaded or not in desktop browser it work but when i run it on my phone angular is not load and variable is not printing
$scope.test= 122;
Don't know the problem cause, i also test after building but still same problem.
the login page is :
<!DOCTYPE html>
<html>
<head>
<title>Login </title>
<link href="css/loginnew.css" rel="stylesheet" type="text/css">
<script src="js/jquery-3.2.1.min.js"></script>
<!-- <script src="js/angular.js"></script>-->
<script src="js/angular.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/sweetalert.css" rel="stylesheet">
<!-- Google Fonts -->
<link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700|Lato:400,100,300,700,900' rel='stylesheet' type='text/css'>
<!-- <link rel="stylesheet" href="css/animate.css">-->
<!-- Custom Stylesheet -->
<!-- <link rel="stylesheet" href="css/loginstyle.css">-->
<style>
.errorlabel
{
color: red;
font-weight: normal;
width: 100%;
border-radius: 0px 0px 8px 8px;
padding: 0 10px;
background: rgba(128, 128, 128, 0.28);
}
</style>
</head>
<body ng-app="myApp" ng-controller="logincontroller">
<!--
you can substitue the span of reauth email for a input with the email and
include the remember me checkbox
-->
<div class="container">
<div class="card card-container">
<!-- <img class="profile-img-card" src="//lh3.googleusercontent.com/-6V8xOA6M7BA/AAAAAAAAAAI/AAAAAAAAAAA/rzlHcD0KYwo/photo.jpg?sz=120" alt="" /> -->
<img id="profile-img" class="profile-img-card" src="img/user.jpg" />
<p id="profile-name" class="profile-name-card"></p>
<form class="form-signin">
<span id="reauth-email" class="reauth-email"></span>
<input id="name" ng-model="username" placeholder=" username" type="text" style=" background-color: transparent;
border-style: solid;
border-width: 0px 0px 2px 0px;
border-color: black;
font-size: 17px;">
{{test}}
<input id="password" ng-model="password" placeholder=" **********" type="password" style=" background-color: transparent;
border-style: solid;
border-width: 0px 0px 2px 0px;
border-color: black;
font-size: 17px;">
<button class="btn btn-lg btn-primary btn-block btn-signin" ng-click="verifylogin(username , password)"> Login </button>
<span class="errorlabel">{{errormessage}}</span>
<a href="#" class="forgot-password">
Forgot the password?
</a>
</form>
</div><!-- /card-container -->
</div><!-- /container -->
</body>
<script> function ajaxcall(rurl,rdata,successfunc,title,message)
{
alert('aese hi');
rurl= "https://basit.co/"+rurl ;
$.ajax({
url: rurl, data: rdata ,
success: function(data)
{
//unblur();
data = JSON.parse(data);
//data.data = JSON.parse(data.data);
if(data.errors.length>0)
{
$.each(data.errors, function(ind,e){
console.log(" --"+e.message);
sweetw('Error', e.message);
});
}
else
{
if(successfunc)
{
successfunc(data);
return;
}
if(rdata.reload)
{
setTimeout(function(){location.reload()},2500);
}
console.log();
if(!title)
{
sweets("Success",'');
}else{
sweets(title,message);
}
}
},
error: function(jqXHR, textStatus, errorThrown)
{
// unblur();
console.log(jqXHR);
alert("Server Error");
},
type: 'POST' ,
});
}</script>
<script>
var app = angular.module('myApp', []);
app.controller('logincontroller', function($scope) {
$scope.loginuser="";
$scope.errormessage = "";
$scope.test= 122;
$scope.verifylogin = function (username,password){
ajaxcall("backend/accountf.php",{"verifylogin":true,username,password},function(response){
console.log(response.data);
if( username=="" || !username)
{
$scope.errormessage= response.data[0].errordetail;
}
else if(response.data[0].username == username)
{
$scope.loginuser = username ;
var currentpage = "/" + window.location.pathname.split('/')[1];
location.href ='indextest.html';
$scope.errormessage="";
}
else
{
$scope.errormessage= response.data[0].errordetail;
// alert(response.data[0].errordetail);
}
$scope.$digest();
}
);
}
});
</script>
</html>
I don't see your angular module (myApp) in the code... Try calling the script containing your angular module.
it work fine with android version greater then jellybean but not work with lower
so i send data with typescript format as ajaxcall("backend/accountf.php",{"verifylogin":true,"username":username,"password":password},function(response){
.
.
.
}
and now it work :)
This is my HTML code :
<!DOCTYPE html>
<html ng-app="starter">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Ionic List Directive</title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="cordova.js"></script>
<script src="js/app.js"></script>
<script src="js/jsonCntrl.js"></script>
</head>
<body ng-controller="myCntrl">
<ion-header-bar class="bar-positive">
<h1 class="title">Items List</h1>
</ion-header-bar>
<ion-content>
<ion-list >
<ion-item ng-repeat="item in myData">
{{ item.Name }}
</ion-item>
</ion-list>
</ion-content>
</body>
</html>
This is my Controller Code :
angular.module('starter', []).controller('myCntrl', function($scope,$http) {
$http.get("http://www.w3schools.com/angular/customers.php").then(function(response){
$scope.myData = response.data.records;
});
});
I am not getting a list view instead something like this
List response Link
But when i use the same code to populate data from an array its working fine.
Try this:
angular.module('starter', []).controller('myCntrl', function($scope,$http) {
$http
.get("http://www.w3schools.com/angular/customers.php")
.then(function(response) {
$scope.myData = angular.fromJson(response.data.records);
});
});
Use the same code you have and check the styles of .item class in ionic.css file with the line of 5646 else override that class with below style
border-color: #ddd;
background-color: #fff;
color: #444;
position: relative;
z-index: 2;
display: block;
margin: -1px;
padding: 16px;
border-width: 1px;
border-style: solid;
font-size: 16px;
I would like to add some animations to my angularjs applications, and surfing on dribble I found this example:
Can someone point me to the right direction for achieving this effect ? Are there some libs doing the work or is it entirely artisanal ?
Notice the 2 animations, the one from the front yellow button expanding to the full area, and the back area sliding/fading away
I am giving you an example, you can change the effects to meet your needs!
var app = angular.module('myApp', ['ngAnimate', 'fmp-card']);
app.controller('MainCtrl', function($scope) {
$scope.leftBackText = 'Here you can insert anything you want, may be a page!';
$scope.rightBackText = "http://sstatic.net/stackexchange/img/logos/so/so-icon.png?v=41f6e13ade69";
});
.my-card{
display: inline-block;
}
.back-text{
padding-top: 60px;
padding-left: 10px;
padding-right: 10px;
}
#container{
width: 100%;
}
#card-1{
float: left;
}
#card-2{
float: left;
}
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>AngularJS Flip Card</title>
<link href="style.css" rel="stylesheet" />
<link href="https://rawgit.com/souly1/angular-flip-card/master/css/fmpCardDirective.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script data-require="angular.js#1.3.x" src="https://code.angularjs.org/1.3.6/angular.min.js" data-semver="1.3.6"></script>
<script data-require="angular-animate#*" data-semver="1.3.6" src="https://code.angularjs.org/1.3.6/angular-animate.min.js"></script>
<script src="https://rawgit.com/souly1/angular-flip-card/master/fmpCardDirective.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div id="container">
<fmp-card class="my-card" id="card-1" suffix="left" image="http://sstatic.net/stackexchange/img/logos/so/so-icon.png?v=41f6e13ade69" front-caption="Left Card" small-card-width="200px" small-card-height="200px">
<div class="back-text"><img src={{rightBackText}} /></div>
</fmp-card>
<fmp-card class="my-card" id="card-2" suffix="right" image="http://sstatic.net/stackexchange/img/logos/so/so-icon.png?v=41f6e13ade69" front-caption="Right Card" small-card-width="200px" small-card-height="200px">
<div class="back-text">{{leftBackText}}</div>
</fmp-card>
</div>
</body>
</html>
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 help.
my index.html`
<html ng-app="sample">
<head>
<title>sample</title>
<link type="text/css" rel="stylesheet" href=""/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<script src="jquery.js"></script>
<script src="jquery.ui.all.js"></script>
<script src="jquery.layout.js"></script>
<script src="angular-animate.js"></script>
<script src="angular-ui-router.min.js"></script>
<script type="text/javascript">
var mylayout;
$(document).ready(function(){
myLayout = $('#container').layout({west_size:400,
west_minSize:100
});
})
</script>
</head>
<body>
<div ui-view></div>
</body>
<script type="text/javascript" src="app.js">
<script type="text/javascript" src="home.js">
</html>
`
my app.js as bellow;
var SP ={};
SP.CONTROLLERS = angular.module('spControllers',[]);
sp.Dependencies =['spControllers',ui.router,'ngAnimate'
];
spModule = angular.module('spModule',SP.dependencies)
.config(['$stateProvider','$urlRouterProvider','$httpProvider',
function($stateProvider,$urlRouterProvider,$httpProvider){
$stateProider.
state('home',{
url:'',
templateurl:'home.html'
})
}]);
my home.html is as below;
<div id="container" ng-controller="smpCTRL">
<div class="pane ui-layout-west">WEST</div>
<div class="pane ui-layout-center">CENTER</div>
</div>
my home.js is as below;
SP>CONTROLLERS.controller("smpCTRL", ['$scope',function($scope){
console.log("sucess");
}]);
css as below;
#container {
background: #999;
height: 100%;
margin: 0 auto;
width: 100%;
max-width: 900px;
min-width: 700px;
_width: 700px; /* min-width for IE6 */
}
.pane {
display: none; /* will appear when layout inits */
}
/*
* Default Layout Theme
*
* Created for jquery.layout
*
* Copyright (c) 2010
* Fabrizio Balliano (http://www.fabrizioballiano.net)
* Kevin Dalman (http://allpro.net)
*
* Dual licensed under the GPL (http://www.gnu.org/licenses/gpl.html)
* and MIT (http://www.opensource.org/licenses/mit-license.php) licenses.
*
* Last Updated: 2010-02-10
* NOTE: For best code readability, view this with a fixed-space font and tabs equal to 4-chars
*/
/*
* DEFAULT FONT
* Just to make demo-pages look better - not actually relevant to Layout!
*/
body {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 100%;
*font-size: 80%;
}
/*
* PANES & CONTENT-DIVs
*/
.ui-layout-pane { /* all 'panes' */
background: #FFF;
border: 1px solid #BBB;
padding: 10px;
overflow: auto;
/* DO NOT add scrolling (or padding) to 'panes' that have a content-div,
otherwise you may get double-scrollbars - on the pane AND on the content-div
- use ui-layout-wrapper class if pane has a content-div
- use ui-layout-container if pane has an inner-layout
*/
}
/* (scrolling) content-div inside pane allows for fixed header(s) and/or footer(s) */
.ui-layout-content {
padding: 10px;
position: relative; /* contain floated or positioned elements */
overflow: auto; /* add scrolling to content-div */
}
/*
* UTILITY CLASSES
* Must come AFTER pane-class above so will override
* These classes are NOT auto-generated and are NOT used by Layout
*/
.layout-child-container,
.layout-content-container {
padding: 0;
overflow: hidden;
}
.layout-child-container {
border: 0; /* remove border because inner-layout-panes probably have borders */
}
.layout-scroll {
overflow: auto;
}
.layout-hide {
display: none;
}
/*
* RESIZER-BARS
*/
.ui-layout-resizer { /* all 'resizer-bars' */
background: #DDD;
border: 1px solid #BBB;
border-width: 0;
}
.ui-layout-resizer-drag { /* REAL resizer while resize in progress */
}
.ui-layout-resizer-hover { /* affects both open and closed states */
}
/* NOTE: It looks best when 'hover' and 'dragging' are set to the same color,
otherwise color shifts while dragging when bar can't keep up with mouse */
.ui-layout-resizer-open-hover , /* hover-color to 'resize' */
.ui-layout-resizer-dragging { /* resizer beging 'dragging' */
background: #C4E1A4;
}
.ui-layout-resizer-dragging { /* CLONED resizer being dragged */
border: 1px solid #BBB;
}
.ui-layout-resizer-north-dragging,
.ui-layout-resizer-south-dragging {
border-width: 1px 0;
}
.ui-layout-resizer-west-dragging,
.ui-layout-resizer-east-dragging {
border-width: 0 1px;
}
/* NOTE: Add a 'dragging-limit' color to provide visual feedback when resizer hits min/max size limits */
.ui-layout-resizer-dragging-limit { /* CLONED resizer at min or max size-limit */
background: #E1A4A4; /* red */
}
.ui-layout-resizer-closed-hover { /* hover-color to 'slide open' */
background: #EBD5AA;
}
.ui-layout-resizer-sliding { /* resizer when pane is 'slid open' */
opacity: .10; /* show only a slight shadow */
filter: alpha(opacity=10);
}
.ui-layout-resizer-sliding-hover { /* sliding resizer - hover */
opacity: 1.00; /* on-hover, show the resizer-bar normally */
filter: alpha(opacity=100);
}
/* sliding resizer - add 'outside-border' to resizer on-hover
* this sample illustrates how to target specific panes and states */
.ui-layout-resizer-north-sliding-hover { border-bottom-width: 1px; }
.ui-layout-resizer-south-sliding-hover { border-top-width: 1px; }
.ui-layout-resizer-west-sliding-hover { border-right-width: 1px; }
.ui-layout-resizer-east-sliding-hover { border-left-width: 1px; }
/*
* TOGGLER-BUTTONS
*/
.ui-layout-toggler {
border: 1px solid #BBB; /* match pane-border */
background-color: #BBB;
}
.ui-layout-resizer-hover .ui-layout-toggler {
opacity: .60;
filter: alpha(opacity=60);
}
.ui-layout-toggler-hover , /* need when NOT resizable */
.ui-layout-resizer-hover .ui-layout-toggler-hover { /* need specificity when IS resizable */
background-color: #FC6;
opacity: 1.00;
filter: alpha(opacity=100);
}
.ui-layout-toggler-north ,
.ui-layout-toggler-south {
border-width: 0 1px; /* left/right borders */
}
.ui-layout-toggler-west ,
.ui-layout-toggler-east {
border-width: 1px 0; /* top/bottom borders */
}
/* hide the toggler-button when the pane is 'slid open' */
.ui-layout-resizer-sliding .ui-layout-toggler {
display: none;
}
/*
* style the text we put INSIDE the togglers
*/
.ui-layout-toggler .content {
color: #666;
font-size: 12px;
font-weight: bold;
width: 100%;
padding-bottom: 0.35ex; /* to 'vertically center' text inside text-span */
}
/*
* PANE-MASKS
* these styles are hard-coded on mask elems, but are also
* included here as !important to ensure will overrides any generic styles
*/
.ui-layout-mask {
border: none !important;
padding: 0 !important;
margin: 0 !important;
overflow: hidden !important;
position: absolute !important;
opacity: 0 !important;
filter: Alpha(Opacity="0") !important;
}
.ui-layout-mask-inside-pane { /* masks always inside pane EXCEPT when pane is an iframe */
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
}
div.ui-layout-mask {} /* standard mask for iframes */
iframe.ui-layout-mask {} /* extra mask for objects/applets */
/*
* Default printing styles
*/
#media print {
/*
* Unless you want to print the layout as it appears onscreen,
* these html/body styles are needed to allow the content to 'flow'
*/
html {
height: auto !important;
overflow: visible !important;
}
body.ui-layout-container {
position: static !important;
top: auto !important;
bottom: auto !important;
left: auto !important;
right: auto !important;
/* only IE6 has container width & height set by Layout */
_width: auto !important;
_height: auto !important;
}
.ui-layout-resizer, .ui-layout-toggler {
display: none !important;
}
/*
* Default pane print styles disables positioning, borders and backgrounds.
* You can modify these styles however it suit your needs.
*/
.ui-layout-pane {
border: none !important;
background: transparent !important;
position: relative !important;
top: auto !important;
bottom: auto !important;
left: auto !important;
right: auto !important;
width: auto !important;
height: auto !important;
overflow: visible !important;
}
}
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 upgrade your browser 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>E-commerce</li>
<li>Projects</li>
<li>Project Detail</li>
<li>Contacts</li>
<li>Profile</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>403 Error</li>
<li>404 Error</li>
<li>500 Error</li>
<li>Plain Page</li>
<li>Login Page</li>
<li>Pricing Tables</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>Level One
<li><a>Level One<span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li class="sub_menu">Level Two
</li>
<li>Level Two
</li>
<li>Level Two
</li>
</ul>
</li>
<li>Level One
</li>
</ul>
</li>
<li><i class="fa fa-laptop"></i> Landing Page <span class="label label-success pull-right">Coming Soon</span></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>
You should try your code after angular DOM is ready
angular.element(document).ready(function () {
myLayout = $('#container').layout({west_size:400,
west_minSize:100
});
});
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.
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>