I'm having trouble running enter animation first time the page is loaded. I think this is an old problem having to do with this issue.
You can see my problem here.
The strange thing is that when I put the templates in seperate files (and not as text/ng-template) the animation works flawlessly as you can see here.
Since my application will work on file URI scheme I have to use text/ng-template.
Any workarounds? I couldn't find one that fits.
I was able to fix the issue with the dirty hack down this page.
Added ng-if to my ng-view's container
<div ng-if="true" ng-view></div>
along with:
$rootElement.data("$$ngAnimateState").running = false;
in my first controller.
And here is the working demo.
Thank you.
Related
I use the following code snippet to show a simple modal:
$modal({
title: 'My Title',
template: 'path/to/my/simple.modal.html',
show: true,
scope: $scope
});
After closing the modal some parts of my webpage do not react to any events. In all other browsers this is working fine.
It's also really strange that I am not able to inspect some of the elements after closing the modal, all elements are shown as one single element (when using the Inspector-Tools in IE). After found one inspectable item, all the other items are getting inspectable as well. After inspecting for some moments, there is no freezed part again ... it's a really strange behaviour.
Does anybody else have this behaviour ?
I am using Angular 1.5 and Angular-Strap 2.3.7.
Thanks in advance !
Sad, that there were no further hints on this.
I looked in the angular-strap bug-list for a solution and found one :
Just call $destroy(); after hiding the modal did the trick for me.
Best !
I Know this question is answered. but this is for share some info on that same issue.
Recently I also came across with that issue. In my case the reason was a CSS attribute Display:block. So after I turn the value from block to none my freezing error went off and it worked like a charm. So first right after you get that error check in Inspection whether the resulting div where the modal is loaded has a style = "Display:block" in it. If so remove it by a script or etc.
Hope this will help to improve this question.
I'm trying to use $state.go to switch between tabs in an Ionic (+AngularJS UI Router) application, but I can't make it work with a sub-sub-state (state.substate.subsubstate). It actually works fine when moving to a sub-state (state.substate).
Here's what I mean: http://codepen.io/anon/pen/Jykmi?editors=101
Pressing the "Tab2" button neither works nor throws an error. Nonetheless, replacing the ng-click="goToState('tabs.tab2.home1')" (in line 25) with ui-sref="tabs.tab2.home1" or href="#/tabs/tab2/home1", works perfectly. Here's an example: http://codepen.io/anon/pen/DIxhC?editors=101
Even using ng-click="goToState('tabs.tab2')" would work, though that's not the intended target state.
I've found other similar questions (like this and this) but I don't think they had the same problem.
Does anybody know if $state.go should work with 3rd-level nested states?. Is the problem in my code?.
Thanks a lot in advance.
Regards,
Rafa.
As ui-sref="tabs.tab2.home1" internally use $state.go and as you said ui-sref="tabs.tab2.home1" works.
My answer is yes : $state.go() should work with 3rd-level nested states.
I actually use it in my own projet with no problems (but without ionic tabs)
I am sorry I don't have enough reputations to add a comment.
I got the exactly same problem as you do: href or ui-sref works fine while ng-click with $state.go has no effect(the address in browser changed correctly but the view remains unredirected). I solved this problem by simply use them both at the same time:
In html:
ui-sref="tabs.tabs2.home" + ng-click="goHome()"
or
href="#/tabs/tabs2/home" + ng-click="goHome()"
In controller js:
$scope.goHome = function(){
$state.go('tabs.tabs2.home');
// or, location.path works fine too:
// $location.path('/tabs/tabs2/home');
}
I don't know the reason, so this is only a workaround
http://embed.plnkr.co/SPGNLd0bcmo2Xt2TAZcB/preview
Here we have a list of personnel information cards. If you click on one, the directive triggers a template to be loaded between that row and the row before it. My problem is that it only works once!
I believe that my problem lies somewhere in my compile statement, but I'm not sure:
$compile(controller.former)(scope);
What honestly baffles me is that even if you just click on the same card over and over again, ignoring all the others, it still just loads the one time. After the first successful load, the Template insertion is coming up empty. that is, isntead of the full template being inserted, i'm just getting:
<!-- ngInclude: 'focus.html' -->
And not the actual template located in that file. Does anybody have any Idea what is going on here?
I apologize in advance for the relatively complex directive, if anybody has any suggestions for refactoring it, I am an open book.
I think the problem I described is in async manner of getting the template from the server side. In case of cached content it didn't work. You used element bind to click which is anti-angular way and non-angular context (thus you needed yo call $apply). And in this case I guess the problem that $scope.apply works before the content of the compiled node itself is processed (because you get the template immediately from the cache). If you call $scope.apply from the $timeout function or (better) change the function to scope function linked with templates via ng-click it works as expected.
I think for the goal are are going to achieve you are taken a bit wrong design which looks a bit weird. Anyway I can show you the problem - you are using separate template which is compiled inside of the ng-include. ng-include directive actually performs $http request with using template cache (default behavior) because of this the data is loaded only once and the template isn't inserted. If you add random seed to the template URL or make $templateCache.remove('focus.html') before compiling that can solve your issue (but I don't think it's good solution as it makes http call each time). You should definitely re-factor your code to make it more clean.
I changed
controller.former = angular.element('<div ng-include="\'focus.html\'"></div>');
to:
controller.former = angular.element('<div><div ng-include="\'focus.html\'"></div></div>');
By wrapping the template into a parent container, I ensure that controller.former is always a reference to a container that holds all of the elements generated during compile time. without this fix, sometimes controller.former would only be selecting the comment node that precedes the inserted material. This resolves causes problems when i'm passing that selector into $animate.enter or $animate.leave, because it ends up only trying to animate that single comment node and ignoring it's next sibling.
I'm using Backbone.js with mustache.js, and I'm loading my templates using ajax. my problem is that the templates are being loaded from cache(refreshing using ctrl+F5 if that matters!). Now I have made changes to the template but it's still loading the old version of it. It's working perfectly fine in incognito. Is there a way to prevent this? Maybe prevent Mustache from caching the template?
The code that renders the template is:
$.get(this.templatesPath + this.template, function(resTemplate){
var html = Mustache.render(resTemplate, that.personData);
that.$el.html(html);
});
My first thought was to use some other function instead of "Mustache.render()" like maybe "Mustache.to_html()". But looking at the
Source Code
reveals that to_html() merely calls render().
Any thoughts?
Apologies for digging up this very old question, but I was searching for the answer to a similar question and didn't end up finding it anywhere. This question is one of the first that shows up when searching "mustache disable caching".
I am using Mustache and Express with the mustache-express module. I was able to disable caching with the following:
const Mustache = require('mustache-express')();
delete Mustache.cache;
I hope this helps someone else in the future.
I am trying to have angular validation on my page.
I have a plunkr here that shows a normal select that behaves the way you would expect. It starts off not selected, when you select an option and then go back to the blank option, the error shows up:
http://plnkr.co/edit/SEgsPRaRCjVnpV0PGxJf?p=preview
However, if I change that to a ui-select2, it automatically makes it dirty and shows the error message on load. Any thoughts on a workaround for this? thanks in advance!
This is a known problem with angular-ui and select2.
Seems like it has been resolved, but I never got it working.
In my case I just moved to chosen.js.
I found this post and after some small changes I ended up with the following directive:
https://gist.github.com/royts/5894780
It is working great and not marking the form as dirty after initialization , and it looks better (you can still see the chosen options but they are great, line wrapping looks better).