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.
Related
I am facing a performance issue in my angularjs application using angular material.
I have an <md-select> with many options (around 1300) and this <md-select> is in an <md-tab> tag. On the page load, my page freezes. This is probably due to Google Chrome's event passive listener, because I get the following log in my js console :
[Violation] Added non-passive event listener to a scroll-blocking 'touchmove' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
You can find a codepen which reproduces my issue : https://codepen.io/jjalal/pen/vWxYbv.
When switching from Harry to John the page freezes (it is way more obvious on my application). If you open the js log and set the log level to 'All levels' (enable verbose level), you can see the 3000 logs (I have 3 select with 1000 options each).
I saw on some answers that I should set the event passive to true like this :
document.addEventListener('touchmove', function(e) {
e.preventDefault();
}, { passive: true });
But this didn't solve my issue.
Any help would be appreciated.
Very recently (two days ago) had a very similar issue and after hours of research I had to realize that this is something that won't be fixed in the near future. Please refer to this question and the accepted answer for explanation. (And also check out the angularjs github issue which has a tag 'won't fix')
Regarding a kind-of solution:
The problem is 100% with the browser (don't even try it in IE, it will freeze with a note 'long running script') and the DOM rendering and not in your code. So I kept trying and trying and trying, removed tiny parts of the DOM (complete container divs, buttons, paragraphs, whatever I could find) one by one. At one point I was able to identify what caused the issue. I had an item that was draggable which contained a clickable md-icon and that icon had an on-hover md-tooltip. Now you see it had 3 events (dragging the item, clicking on the button and hovering the button) which collided. After removing the md-tooltip it worked like a charm. My suggestion is for you to start identifying what exactly could be causing this. The real solution will have to wait...
After a lot of research, and tinkering, I can't seem to actually get my Protractor test to do anything else other than have an Angular related error, even though I am using browser to avoid Angular being detected at all.
The test involves an Angular app, opening a dropdown in it, and clicking on the link for the console; the console opens a non-Angular admin page in a separate window.
So based on the many informative SO posts I found, I first used this...
browser.driver.getAllWindowHandles().then(function(handles) {
browser.driver.switchTo().window(handles[1]).then(function() {
//expect for new window here
});
});
Which appeared to work, as I could get to the window through repl pretty easily.
The issue is when either of the following were added...
browser.driver.getAllWindowHandles().then(function(handles) {
browser.driver.switchTo().window(handles[1]).then(function() {
expect(browser.getLocationAbsUrl()).toContain('/console/login.jsp');
expect(browser.driver.findElement(By.css('th.login')).getText()).toEqual('Login');
});
});
One expect check the URL and the other checks for the header element on the page, which is a table header. When I run this, I get the following:
Error while waiting for Protractor to sync with the page: "angular could not be found on the window"
When I decide to use browser.ignoreSynchronization = true, both in the function, or in a beforeEach, with or without a following afterEach setting it to false, I get the following:
JavascriptError: angular is not defined
I can't seem to get any "useful" errors to help me debug it, and trying it in repl does not help, as I get the same issue.
To be comprehensive, trying my URL expect without getting the second window will give me the root, and the other will fail.
Just doing one or the other will cause the same problem.
Changing to regular syntax (element(by.css...)) does not change things.
So much for my first question...
It appears that my use of browser.getLocationAbsUrl() is meant to be used for an Angular page, and was causing my issue...
Essentially, even though I believed I was using pure Webdriver calls, that call still required Angular on the page to work...
As stated in another post, the use of browser.driver.getCurrentUrl() is a non-Angular call using Webdriver, and fixed the problem. Thus, the final code is the following...
browser.sleep(1000); //to wait for the page to load
browser.driver.getAllWindowHandles().then(function(handles) {
browser.driver.switchTo().window(handles[1]).then(function() {
expect(browser.driver.getCurrentUrl()).toContain('/console/login.jsp');
expect(browser.driver.findElement(By.css('th.login')).getText()).toEqual('Login');
});
});
This works without setting ignoreSynchronization, BTW.
I realized it would probably be something relatively simple to fix it, just didn't expect I'd get it that quickly (I intended on submitting the question last night, but posted it this morning instead).
In any case, I hope this will at least be a good reference for anyone else facing the same issue.
Seems like getLocationAbsUrl is angular abs url.
Try using the native driver getCurrentUrl instead.
-- expect(browser.getLocationAbsUrl()).toContain('/console/login.jsp');
++ expect(browser.driver.getCurrentUrl() ...
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.
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
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).