Alright, so this might either be an Angular thing (in which case I might also be doing things completely wrong), but it could also be a browser / CSS thing.
"As simple as possible" plunker: https://plnkr.co/edit/t3woLDwynHYgbRDGNZDK
Also, full code (runnable as code snippet) attached to this post.
The example should be pretty clear, though certainly not pretty or designed in any way. If you don't feel like reading the ~20 lines of code, the following is what should happen:
There is a "button", the area with the paste icon in it. When you click it, an operation starts. With it, a spinner (controlled by a variable on the scope) is shown inside the button. When the operation finishes (simulated by the $timeout in the example), a message is set on the scope (imagine a result info message) and the spinner-controlling variable is turned off.
The intent is of course that the spinner should always be rendered inside (position: relative) the box, but during a brief moment while elements are being re-compiled / re-evaluated, it's instead rendered just above the box (or somewhere in between the middle and above).
If you don't see the effect I am describing straightaway, click the "Clear state..." button and try again. Also, you can try different values for the $timeout. For me, a $timeout of ~ 20 ms pretty much always gives me a spinner above the box in Chrome. Firefox seems to require a slightly higher timeout, or it won't even render the spinner half the time.
I initially assumed this to be an effect of Angular re-evaluating the two elements one at a time (re-rendering them), which gave the browser a rendering tick or two to actually draw the spinner incorrectly while it was still showing. However:
What confuses me a bit is that by turning up the $timeout time to something like 200 ms, the problem goes away (or at least my eyes make me believe that), leading me to believe it might not be an Angular problem after all, but a rendering timing one? Perhaps the browser (Chrome in this case, but reproducable in at least Firefox as well) doesn't like hiding the element again after just a tick?
ng-show / ng-if doesn't make a difference here.
Changing the spinner icon for other icons (and removing the spin) doesn't make a difference.
Full code, since it seems to be required now:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope, $timeout) {
$scope.message = undefined;
$scope.loading = false;
$scope.perform = function(event) {
event.stopImmediatePropagation();
$scope.loading = true;
$timeout(function() {
$scope.message = "Some message...";
$scope.loading = false;
}, 35);
};
$scope.clear = function() {
$scope.loading = false;
delete $scope.message;
};
});
#element .resource {
position: relative;
width: 120px;
margin: 0;
padding: 10px;
float: left;
box-sizing: border-box;
-moz-box-sizing: border-box;
font-size: 14px;
text-align: center;
}
#element .resource .shadow {
height: 124px;
box-sizing: border-box;
-moz-box-sizing: border-box;
border-radius: 4px;
border: 1px dashed #ccc;
padding-top: 32px;
color: #bbb;
cursor: pointer;
}
#element .resource .shadow:hover {
color: #888;
border-color: #999;
}
#element .resource .shadow.inactive {
color: #bbb;
border-color: #999;
cursor: default;
padding-top: 48px;
}
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link data-require="bootstrap-css#3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<link data-require="font-awesome#*" data-semver="4.5.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.css" />
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.3.x" src="https://code.angularjs.org/1.3.20/angular.js" data-semver="1.3.20"></script>
<script data-require="jquery#*" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script data-require="bootstrap#*" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div class="alert alert-info" ng-show="message">{{message}}</div>
<div id="element">
<div class="resource">
<div x-ng-show="!loading" class="shadow" x-ng-click="perform($event);">
<i class="fa fa-paste fa-2x"></i>
</div>
<div x-ng-show="loading" class="shadow inactive">
<i class="fa fa-spinner fa-spin fa-stack-2x text-info"></i>
</div>
</div>
</div>
<button ng-click="clear();">Clear state...</button>
</body>
</html>
Related
I am trying to obtain horizontal scroll using buttons.
I have a container which has several elements(which can be more than 3 , getting values from backend) stacked horizontally and I want to scroll through them using the buttons. Also i want to hide those buttons when there is no scrollbar.
This is very easy and usefull:
angular.module('anchorScrollOffsetExample', [])
.run(['$anchorScroll', function($anchorScroll) {
$anchorScroll.yOffset = 50; // always scroll by 50 extra pixels
}])
.controller('headerCtrl', ['$anchorScroll', '$location', '$scope',
function($anchorScroll, $location, $scope) {
$scope.gotoAnchor = function(x) {
var newHash = 'anchor' + x;
if ($location.hash() !== newHash) {
// set the $location.hash to `newHash` and
// $anchorScroll will automatically scroll to it
$location.hash('anchor' + x);
} else {
// call $anchorScroll() explicitly,
// since $location.hash hasn't changed
$anchorScroll();
}
};
}
]);
body {
padding-top: 50px;
}
.anchor {
border: 2px dashed DarkOrchid;
padding: 10px 10px 200px 10px;
}
.fixed-header {
background-color: rgba(0, 0, 0, 0.2);
height: 50px;
position: fixed;
top: 0; left: 0; right: 0;
}
.fixed-header > a {
display: inline-block;
margin: 5px 15px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-anchor-scroll-offset-production</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script src="//code.angularjs.org/snapshot/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="anchorScrollOffsetExample">
<div class="fixed-header" ng-controller="headerCtrl">
<a href="" ng-click="gotoAnchor(x)" ng-repeat="x in [1,2,3,4,5]">
Go to anchor {{x}}
</a>
</div>
<div id="anchor{{x}}" class="anchor" ng-repeat="x in [1,2,3,4,5]">
Anchor {{x}} of 5
</div>
</body>
</html>
My problem is that my AngularJS (latest v1.X) can't add to the DOM svg elements I'm generating from it in IE.
I have no errors showing in the dev console. My app is loaded (and thus, the controller), since the width and height of the svg container are set by Angular.
The application is working fine on Firefox, Chrome, Tablets Chrome and Android browser...
My directive :
'use strict';
My_App.directive('ngHtmlCompile', ["$compile", function ($compile) {
return {
restrict: 'A',
replace: true,
link: function (scope, element, attrs) {
scope.$watch(function () {
return scope.$eval(attrs.ngHtmlCompile);
}, function (value) {
element.html(value);
$compile(element.contents())(scope);
});
}
}
}]);
My HTML :
<!DOCTYPE html>
<html lang="fr" ng-app="My_App" ng-controller="App">
<head>
<meta charset="UTF-8">
<title>My App</title>
<style>
* { margin:0; padding:0; #import url('https://fonts.googleapis.com/css?family=Open+Sans'); font-family: 'Open Sans', sans-serif; font-weight: bold; } /* Retire les espaces autour du canvas */
html, body { width:100%; height:100%; } /* Override le comportement des navigateurs */
svg { display:block;background-color: dimgrey;} /* Retire la scrollbar */
svg text {
cursor: default;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
::selection, ::-moz-selection{background: none;}
</style>
<script type="text/javascript" src="angular/angular.min.js"></script>
<script type="text/javascript" src="js/MyApp.js"></script>
</head>
<body>
<svg id="MyApp" ng-cloak ng-attr-width="{{svg.width}}" ng-attr-height="{{svg.height}}" ng-html-compile="html"></svg>
</body>
</html>
Controller side, my $scope.html is updated once at startup with a XHR request, then every 5 seconds after it.th ngHtmlCompile is then called to read it, and add the html stored in as childrens of svg.
If anything is missing, you can ask me. First post, so feel free to tell me if I did anything wrong on my request. And last, sorry if my english is broken, I'm French.
Thanks for your help.
Like a comment above said (thanks to Robert Longson), the html() function doesn't work on IE 11. It just doesn't even appear in dev console that something is wrong.
As a solution (mainly, I just did it another way), I used the ngRoute module for angular.
The index.html is now only a container of a <div ng-view> tag, and my <svg> is placed in an include.html. In this, you can use any $scope var in any attribute, and you're done.
I'm not accepting this answer as long no one can tell that we can't generate html on IE11, as it was my original purpose.
If appears as if you can use Element.insertAdjacentHTML() instead of Element.html(). It seems to work on IE11.
var svgStr='<svg><rect width="100%" height="100%" fill="red"/></svg>';
var div = document.getElementById("test");
div.insertAdjacentHTML('afterbegin', svgStr);
<div id="test"></div>
I want to create a button with a ripple effect on clicked.Is it necessary to achieve it through a directive. How do i handle the javascript required to handle the click and propagate the ripple away from the point it was clicked.
I have done it using javascript and css but it is not the angular way.
<!doctype html>
<head>
<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import"/>
<link href="paper-ripple/paper-ripple.html" rel="import"/>
</head>
<body>
<test-elem></test-elem>
<dom-module id="test-elem">
<template>
<style>
div {
width: 150px;
position: relative;
padding: 15px;
border: 1px solid black;
}
button { color: green; border: 1px solid green; }
</style>
<div>
<paper-ripple></paper-ripple>
<button id="btn">Button</button>
</div>
</template>
<script>
Polymer({ is: 'test-elem',
listeners: {'btn.down': 'onDown'},
onDown: function(e) {
e.stopPropagation();
}
});
</script>
</dom-module>
</body>
I'm developing a web component form.
I'm having troubles with angularjs bootsrap.
I'm creating dinamically a custom element with form.createdCallback <form> and <input, textarea etc> and adding ng-app="", ng-controller="" attributes.
Later I encapsule it with template.createShadowRoot()
I use document.addEventListener('DOMContentLoaded', function(){angular.bootstrap(document, ['mform'])}), but doing this not execute anything from my angular app...
So, I tried removing the line template.createShadowRoot() and angular execute everything pretty well... so I arrived to the conclusion that the problem is angular not compiling inside shadow dom.
There's any hack or way to do this?
I'm not sure if this really answers your question, but I am able to get Shadow DOM to work in Angular 1.x. Be aware that if you are after CSS encapsulation, then this will only work on browsers that natively support Shadow DOM since the Polyfill can not do the same thing.
I use $compile to create the contents of the Shadow DOM and bind that back into the directive.
Here is my code example:
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8">
<title>Angular 1.x ShadowDOM example</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script>
var app = angular.module('app', []);
app.controller('myElController', ($scope) => {
});
var template = `
<style>
:host {
left: 50%;
position: fixed;
top: 50%;
transform: translate(-50%,-50%);
border: 1px solid black;
box-shadow: 4px 4px 4px rgba(0,0,0,.4);
display: inline-block;
padding: 6px 12px;
}
h3 {
border-bottom: 1px solid #999;
margin: 0 -12px 8px;
padding: 0 12px 8px;
}
p {
margin: 0;
}
</style>
<h3>{{title}}</h3>
<p>{{info}}</p>
`;
app.directive('myEl', ($compile) => {
return {
"restrict": "E",
"controller": "myElController",
"template": '',
"scope": {
"title": "#",
"info": "#"
},
"link": function($scope, $element) {
console.log('here');
$scope.shadowRoot = $element[0].attachShadow({mode:'open'});
$scope.shadowRoot.innerHTML = template;
$compile($scope.shadowRoot)($scope);
}
};
});
</script>
</head>
<body>
<div>
<my-el title="This is a title" info="This is the info of the element"></my-el>
</div>
<div class="shell">
<h3>Outside title (H3)</h3>
<p>Outside content (P)</p>
</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>