After inspecting an element, I see this very often-
I then have to switch over to AngularJS tab in Google Chrome and then click the checkbox Enable as seen clearly in the attached image. I don't know why it keeps on switching off after sometime.
It does have a material impact atleast on the application I am working. The moment I switch over to AngularJS tab (so as to enable the very same checkbox aforementioned), the whole application gets refreshed (Ctrl+F5) automatically gets invoked.
It's a disaster for me as the application which I am developing has around 5 to 6 steps. And I do have to cry when I have to inspect an element on step6 and when sometimes there is: $scope is not defined. All the values gets lost since after automatical refresh, the application swill get navigated to step-1.
This happens with the browsers for all the fellow associates in the team. This just makes us nervous.
Kindly suggest.
Related
We are using angular-material's md-tabs to display information to the user.
Up until now we used an on-demand approach by adding
ng-click=vm.getForExampleDataForTab1(),
ng-click=vm.getForExampleDataForTab2()
and so on for each md-tab. But this solution has a problem that the first tab is displayed with no data because it doesn't get clicked by the user. So we switched to md-on-select instead. And that did the trick, the first tab was getting data and all was fine. Apparently. We then discovered in Chrome's Dev tools that when moving to another page in the app, all the other tabs that were not selected (the user didn't click on them to view the data) were called.
Did anyone encounter such a behaviour? It only happens when we used md-on-select, not ng-click on the tabs.
Thanks a lot,
ashilon
I have a WPF application that hosts a CEF browser using CEFSharp. I've found that if I navigate my application's controls using keyboard tabbing, I can cycle through my controls without problem. Once focus makes it to the ChromiumWebBrowser control, focus shifts to within the current web page, as expected. However, once focus makes it within the web page, I can never get focus back out to my application. Hitting tab at the end of the html document just moves focus back to the top of the page, rather than pushing focus back to my application.
I have tried implementing IFocusHandler, but IFocusHandler.OnSetFocus() gets called right when the application is launched and none of the handler methods ever get called again.
How can I move focus back to the host application when tabbing reaches the end of a document in CEFSharp?
UPDATE:
Since this is a bug in CEF that has yet to be fixed, here are a couple relevant links to check on later to see if any progress has been made.
CEFSharp issue: https://github.com/cefsharp/CefSharp/issues/721
CEF issue: https://bitbucket.org/chromiumembedded/cef/issues/1826/focus-handler-not-called-for-offscreen
I have this weird issue with my angular app. It doesn't happen every time but I've been able to consistently reproduce it if I click to it as quickly as I can as soon as my angularjs app loads.
Basically my right pane directive will sometimes render a blank page. This page however appears when I resize the browser window a little bit.
I'm not even sure where to begin looking to resolve this bug. I tried messing around with $timeout and $scope.$apply but it didn't seem to do anything.
Has anyone seen anything like this before and if so, how did you resolve it?
Note the directive I use does use ng-include with a value that is dynamically generated from the custom directive's associated controller.
P.S. Another oddity, if I move my mouse over the allow main dock then it loads the page too. (I assume it's doing an unfocus action on the browser window.) I wanted to see if this was a browser specific issue because of this. Looks like it's only Chrome where this is a problem, as I can't reproduce the problem on firefox.
Same problem caused by CSS - display: table, found a solution by changing it to display: inline-block, so check if you have a such.
Bootstrap3 and Angular are supposed to play nicely together.... and with Bootstrap being "mobile first" I never thought I'd run into this, but I have.
I have a modal window being popped up from a button (via a standard modalService), which works just fine across the desktop browsers I've tested with (IE 10, 11, Edge, Chrome, Opera, Safari, and Firefox) but fails on mobile. Every mobile I have access to (IOS Chrome, IOS Safari, Android Internet Browser, and Android Chrome).
It also displays the same failure on Chrome emulation of mobile browsers.
In all cases on mobile, the radio buttons and checkbox fail to recognize a tap/click event.. unless I hold for a long long time (much longer than the 300ms I've seen mentioned in articles). In a couple mobile browsers that do capture it - the Angular actions which result from the change are not being executed on the mobile clients (but are on the desktops)
<input type="radio" class="form-control" ng-Model="modalOptions.rScope.selectedItem" name="purchase" ng-value="selectedItem=item" ngClick="modalOptions.rScope.selectedItem=item">
ngTouch is being added to the page to facilitate the faster ngClick event.
I have stripped out all the relevant code and created a plunk showing this : http://plnkr.co/edit/iZV6JRnHHHRwAKO2JJ06
Is this a function of how the radio buttons were defined? And if so, why is the checkbox displaying the same behaviour (I know it doesnt currently have an ngClick on it - but the behaviour is the same):
<input type="checkbox" class="form-control" width="20px" ng-model="modalOptions.rScope.xgiftfor" />
I get no errors indicating the ngTouch module is not being loaded...
The one thing that bothers me... the page for ngClick states:
A more powerful replacement for the default ngClick designed to be used on
touchscreen devices. Most mobile browsers wait about 300ms after a tap-and-
release before sending the click event. This version handles them immediately,
and then prevents the following click event from propagating.
Is ngTouch preventing Angular from continuing to propagate updates on the form? That click event will have other consequences as the modalOption.rScope.selectedItem update occurs.
OR am I stretching to find a reason for this behaviour?
[EDIT]
I have updated the plunk to display the same data set (code slightly modified due to scope) on the main page, and the behaviour on the modal is NOT present on the main page. Run it in your fav desktop browser and it's good on the main page - but open the modal, and it just doesn't work.
http://embed.plnkr.co/WnxArMU9VUVjDwnvueV1
Does anyone have any clue what the modal introducing that is interfering with the processing (and how to work around it)?
I was running into the exact problem. Unfortunately, I only discovered that the ngClick directive is now deprecated with no workaround.
DEPRECATION NOTICE: Beginning with Angular 1.5, this directive is deprecated and by default disabled. The directive will receive no further support and might be removed from future releases. If you need the directive, you can enable it with the $touchProvider#ngClickOverrideEnabled function. We also recommend that you migrate to FastClick. To learn more about the 300ms delay, this Telerik article gives a good overview.
When navigating around the developer's guide for AngularJS, I noticed that I do not go back to my last scroll position when navigating back to a page using the back button. Instead, I go right back to the top. Since the developer's guide is built with AngularJS, I am afraid that, when I build my own web application with AngularJS, it will annoy my users if they have this same experience. Why is this happening, and how can it be fixed? Do I need to use HTML5's history API somehow?
Go to the developer's guide and see this behavior yourself: http://docs.angularjs.org/guide/directive
If you want to fix it, I can think of an idea of keeping the track of every route scroll position in a map (in service or on a rootScope) - when you are leaving the page ($routeChangeStart listener) just save the scroll position together with route path.
And when coming to any page, you can check if a record in a map exists for the route path and scroll window to desired position on $routeChangeSuccess event
You should look into the Angular $anchorScroll service.
http://docs.angularjs.org/api/ng.$anchorScroll
It is for exactly your scenario!
The sample code pretty much speaks for itself.