I'm trying to use angular ui router with core-animated-pages. Right now I'm stuck because if I include the ui-views inside the sections of a core-animated-pages element, and all of that is inside a <template is="auto-binding"> element, then the transition works but angular does not fill the ui-views. I think it because the template makes it all part of the shadow dom.
Here's a plunkr: http://plnkr.co/edit/tYyuKLO1O5JQVtpNg9Th?p=preview
Thanks.
I was wrong - you don't have to use template.
And here's how you do it!
https://github.com/morgs32/angular-polymer
Related
I got a view with an ion-slide-box
I include some simple ng-hide animation on a div somewhere in the template
Doesn't work.
I remove ion-slide-box elmt.
It works!
Any idea?
Fixed it by replacing deprecated ion-slide-box with new ion-slides
In my index.html file I have the following code:
<body>
<div ui-view></div>
<div ng-include="footer.html"></div>
</body>
The problem is that the footer is displayed before the dynamic content related to the active state is loaded and rendered.
I tried to use the event $viewContentLoaded but this event is fired when the view content has been loaded not when it has been compiled.
I used ng-include in index.html because my footer is generic and should be used in all the app pages.
How to solve this problem?
put your angular script includes in head not at the bottom of the page.
ui-view means nothing until angular is loaded.
you might also want to use a sticky footer to prevent any issue with the footer jumping about.
stick footy for bootstrap is here ...
https://getbootstrap.com/examples/sticky-footer/
Instead of assigning url to ng-include you can bind scope variable and that scope variable value can be changed with actual URL from the directive which was reused in all your views using two way binding '='
I have a bunch of icons stored as strings. I am working on a directive to add these basic icons to the DOM, with a few options for manipulation - adding an outline shape, adding/removing fills and strokes, etc. My directive $observes the element's attributes, updates the scope accordingly. I am using ng-bind-html inside the template to render the icons. I'm fairly new to Angular, and this is the most complex issue I've had to solve thus far. I'm using compile like so:
$compile(icon)(scope, function(e,s){
var svg = d3.select(e).append("circle").attr("r","20");
...
})[0].outerHTML)
Am I on the right track?
JsFiddle Example
I have setup my project to use angular strap with bootstrap and while a button with the bs-modal attribute opens a modal without issues the data-placement and data-animation attributes are not doing anything. i tried passing the animation and placement as defaults via the directive config but that does not help either.
I have:
angular (with angular-animate.js), angular-strap (including angular-strap.tpl.js), bootstrap js files loaded
i have the angular-motion.css file loaded too
the modal opens at the top, without animation whatever i set for animation or placement
Am i missing more css or js requirements not in the docs?
Ok figured this out after some tinkering. The animation did not work because obviously you have to inject the animate js into the directive too if you want to use it:
angular.module('myApp', ['ngAnimate', 'mgcrea.ngStrap']);
This is actually mentioned on the github page but not in the docs so i missed that.
The placement not working seems to be an issue with the base bootstrap css not actually supporting the center class for modals. Maybe a bit unfortunately the docs use this as an example but this will only work if you add the css for this yourself. So to actually use:
data-placement="center"
.. you will either have to load the css from the docs here: http://mgcrea.github.io/angular-strap/styles/libraries.min.css
or just copy the part for centering modals:
.modal.center .modal-dialog {
position:fixed;
top:40%;
left:50%;
min-width:320px;
max-width:630px;
width:50%;
-webkit-transform:translateX(-50%) translateY(-50%);
transform:translateX(-50%) translateY(-50%)
}
I'm trying to animate between two divs when the route changes.
So far it works fine using ng-show and ngAnimate, but the second div contains the ng-view, which immediately disappears once the route changes. How do I wait until the ng-show animation completes before removing the ng-view from the DOM?
Live demo:
http://run.plnkr.co/7RLwUxwfUV4rb2kV/#/
Sample code: http://plnkr.co/edit/0ZatzKRKAyxUUfgslxum?p=preview
You are only animating ng-show in your CSS, but you're not animating when ng-view switches content. You animate ng-view with the .ng-enter and .ng-leave css classes. You can see an example here: http://dfsq.github.io/ngView-animation-effects/app/