When accessing my website built with AngularJS 1.2.0rc1 via the InAppBrowser within PhoneGap 2.7.0 on IOS, the contents of an ng-show flicker on the screen.
<form method="POST" action="" name="manualEntryForm" class="form-inline">
<div ng-show="showErrors && !manualEntryForm.$valid" class="errorMsg ng-hide">
One or more of the following fields are required:
<span ng-show="manualEntryForm.month.$error.required || manualEntryForm.day.$error.required || manualEntryForm.year.$error.required" class="ng-hide">Date needs to be present</span>
...
</div>
...
</form>
It doesn't matter if I default showErrors to false or test it more rigorously (showErrors === true), that block of error content will display and also show the actual error message associated (Date needs to be present).
I'm stumped as to how to address this. Should we not be using the Angular Form Validation within that ng-show? Why is it only causing an issue on IOS/Phonegap InAppBrowser?
I had the same problem. ng-cloak didn't solve the problem, so what solved the issue for me was to add
class="ng-hide"
to each element with the ng-show attribute, and now it doesn't flash the content on ios.
Try using ng-cloak to hide the element during compilation:
http://docs.angularjs.org/api/ng.directive:ngCloak
It might be showing up before the AngularJS compiler has had time to run. And it might only be showing in iOS/Phonegap because the webkit browser in UIWebView is nowhere near as fast as Mobile Safari, let alone a desktop browser.
As a workaround, I ended up removing ng-show, and instead adding an ng-class="{hidden: myCondition}", then defining .hidden { display: none; } in CSS. This removed the flashing.
Related
we are adding ARIA support to our SPA website.
In application we have one activity area where we are showing dynamic messages from server based on validations.
We have added role='alert' and aria-live='assertive' to read those activity messages.
In FF and chrome its working fine however in IE its reading code like "left-brace left-brace txtErrorMessage right-brace right-brace" even if message there on screen
<div role="alert" aria-live="assertive">
<p class="scan-complete-text-auto">
{{model.txtErrorMessage}}
</p>
</div>
here txtErrorMessage will get populated runtime from api results.
we are using angular JS.
How to resolve this issue?
Try using ng-bind="model.txtErrorMessage" instead of {{model.txtErrorMessage}}
Try using ng-show or ng-hide, to hide the div until you have the message ready. The message length can be checked to show or hide the div itself. This will fix the issue.
Also no need for both role="alert" and aria-live="assertive". You can remove role="alert". JAWS + IE tend to read more than once for this combination.
Angular provides CDK APIs built in to handle this scenario.
https://material.angular.io/cdk/a11y/overview#example-1
#Component({...})
export class MyComponent {
constructor(liveAnnouncer: LiveAnnouncer) {
liveAnnouncer.announce("Hey Google");
}
}
Or else you can keep a simple span or div, and update your message programmatically.
<span
aria-live="polite"
class="ada-visuallyhidden"
[innerHTML]="yourCustomADAMessage"
></span>
This sounds wacky but we're currently consistently able to reproduce this issue, and I wanted to know if anyone has seen anything like it, or knows what could be causing it.
We have an Angular 1.4.1 application, and in some of our html partials we have conditions in the following form:
<div ng-if="!obj.myvar">
... contents ...
</div>
Where in your JS you've set up your scope accordingly:
$scope.obj = { myvar: false }
This works as expected in all browsers, except iOS Safari (we've seen this on iPhone and iPad):
On the initial load, all elements following the ng-if fail to load
If you manually refresh the page, it will then work as expected
We've found that changing the syntax to this fixes the issue:
<div ng-if="obj.myvar === false">
... contents ...
</div>
But I'm not hugely satisfied with that as a solution, and it doesn't explain why this issue is happening at all.
Word of warning if you're trying to replicate this - this isn't reproducible on jsFiddle. I assume that's because the results window isn't a "true" browser.
The page loads without any of the images displaying on IE11 only, but refreshes them accordingly when we resize the browser intermittently (1/3 loads). We cannot replicate this with any of the other browsers. srcset works fine by itself with static content.
Here is a Plunker example of it not working in IE11.
Or quick and easy, the actual img html we're using:
<img data-ng-srcset="{{::image.url}}, {{::image.url2x}}" alt="{{::image.name}}"/>
The images or surrounding divs do not have any transitions, shadows or opacity applied.
The html renders fine with angular passing over and rewriting the srcset attribute correctly. The images just do not appear, only the alt tag. Wondering if this could be a call stack issue due to the intermittence of it, maybe a race condition with Picturefill loading before angular finishes a digest or something.
Cheers in advance!
A work around if you use PictureFill in a loop and in a specific case (not on all images of your application), is calling a function that launch PictureFill directly from HTML, after last item loaded (this is not the best practice but fix the IE11 problem) :
<picture><!-- Your image --></picture>
<span ng-if="$last">
{{ controllerAlias.launchPictureFill() }}
</span>
Came across this as a solution: http://tech.endeepak.com/blog/2014/05/03/waiting-for-angularjs-digest-cycle/
var waitForRenderAndDoSomething = function() {
if($http.pendingRequests.length > 0) {
$timeout(waitForRenderAndDoSomething); // Wait for all templates to be loaded
} else {
$window.picturefill();
}
}
$timeout(waitForRenderAndDoSomething);
The only issue that the blog post describes is here, so if anyone has anything better please let me know:
The $http.pendingRequests supposed to be used for debugging purpose only. If angular team decides to remove this, you can implement the same using http interceptors as suggested in this link.
I have a custom directive (to exposecertain fields), and inside that I have another directive (the drop down box for the field). It's working well on Chrome, but on IE9 it appears the ng-show and ng-if is failing to evaluate. It appears not to even enter the function I defined (I put console.log inside the isAllowed function and it appears in Chrome but not in IE9).
<div>
<select id="" class="form-control" ng-model="measure" name="{{name}}">
<option ng-if="isAllowed(name, 1)" value="1">Kilowatt Hours</option>
<option ng-if="isAllowed(name, 2)" value="2">mmBTU</option>
<option ng-if="isAllowed(name, 3)" value="3">Therms</option>
<option ng-if="isAllowed(name, 4)" value="4">Decatherms</option>
</select>
</div>
I have tried ng-show instead of ng-if and it behaves the same in IE9. It appears the replace: true I put on my first directive is not honoured in IE9:
Whereas in Chrome this is replaced as expected with surrounding DIV elements and my custom directives cannot be seen anywhere, which is good.
Has anyone had experience of this before? Is it something to do with having a directive inside of a directive? Seems like IE9 does the first one OK then stops.
(I wish I could drop IE9 but it's an internal app and they're still on IE9 everywhere, so I've got to make it work somehow).
PS: The aim here is to only show the options that are relevant to the given field. In this case Electricity can be measured in kWh and mmBTUs but not in Therms and Decatherms. Inside the isAllowed function is supposed to be some switch logic. It works fine in Chrome, just not IE9, so I might need another method as a workaround.
PPS: Angular 1.3.2. IE9 - Browser Mode: IE9, Document Mode: IE9 Standards.
Figured it out. Isolated scope. Somehow Chrome was dealing with it OK, but IE9 was not.
In my app I have the fields I want to show to my user defined in a Partials module, but the drop-down lists is something I want to use in multiple places and they may change, so I defined them in a directive called BusinessRulesDirectives.
All I needed to do was drop in the BusinessRulesDirectives as a dependency to my Partials module and it works across both Chrome and IE9.
angular.module( 'ActualsPartials', [
'BusinessRulesDirectives'
] )
For some reason Chrome was able to run fine with this, but IE9 did not like it:
angular.module( 'ActualsPartials', [] )
Also, no errors were being output. I just happened to double-check for isolated scope as a wild guess.
Would be interested to know why Chrome was OK but IE9 was not.
I am trying to find Submit element. My HTML structure is as below.
<div>
<span class="combutton">Submit</span>
</div>
<div>
<span class="combutton">Cancel</span>
</div>
In browser using firebug I tried
$('div .combutton')[0].click()
which clicks on submit perfectly. But using selenium driver this element is not found. Please tell me how to do this using
driver.findElement(By.css("CSSSELECTORSTRING"))
What you did in Firebug shouldn't have any effect since it's clicking on a span and not the a inside it.
This should work, unless you omitted certain parts of your markup that would otherwise prevent it:
driver.findElement(By.cssSelector("div:first-child .combutton a")).click();
try that :
driver.findElement(By.xpath("//div span.combutton a[contains(.,'Submit')]")).click();
or
driver.findElement(By.xpath("//div span.combutton[0] a")).click();