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.
Related
So in my angular view I have this:
<div id="submenu" ng-include="'/submenu.html'" ></div>
But when I visit the page, the HTML part is:
<!-- ngInclude : '/submenu.html' -->
I put this line of code in other pages and it renders correctly. Only on one page it gets commented out.
What should I do, how can I fix this? I never saw this bug before.
Thanks
edit
I just checked and the code does not even perform a GET for this particular html file.
edit
I just remove the complex parts out of the age and now is just
<div id="submenu" ng-include="'submenu.html'" ></div>
<div id="anothersubmenu" ng-include="'anothersubmenu.html'" ></div>
and no one of these files render, they both get commented out. My controller looks normal. I view this on Chrome 49.0.2623.87 m. All the included files have the same id , everywhere I include them. All the files are in the same folder.
I dont know is there a limit on the ng-include?
Thanks
I had the same scenario but I created the ngInclude element using
angular.compile and I also got
<!-- ngInclude : '/file.html' -->
and I did not see any requests going out from my browser to get the file
Finally I resolved the issue using the
scope.$apply()
The digest cycle had to happen before the actual including can take place.
hope it helps :)
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 had a bit of code in my view that would only show up when a particular value was true. Lt looked like this:
button type="button" ng-click="attachBarCode('enter')" ng-show="barcodeAllowed.status">Foo</button>
This was working until recently. My controller had some logic where, based on Ajax data, it would set $scope.barcodeAllowed.status to true. All of a sudden though, the button was always showing up. To help debug the issue, I added some additional tests to my view:
first test, <span ng-show="!barcodeAllowed.status">DONT SHOW</span><br/>
second test, <span ng-show="barcodeAllowed.status">DONT SHOW</span><br/>
test -{{barcodeAllowed.status}}-end -{{!barcodeAllowed.status}}- -{{barcodeAllowed | json}}-<br/>
test if <span ng-if="barcodeAllowed.status"> if was true</span><p>
Here is where things got crazy. Both "DONT SHOWS" rendered in my view, even though it seems as if that would be impossible. When I output the values in the third line, I saw false and true, as I expected.
Finally - the ng-if? It worked perfectly! The value did not show up.
I've heard folks mention that ngShow can have scope issues inside a ngif, but my code isn't inside an ngif.
So, you won't believe what it was. I was using a Content Security policy in my app and on a whim, I disabled it. As soon as I did, it began working. I played around a bit and discovered that I needed to add 'unsafe-eval' to the to the script-src area of my CSP in order for Angular to be able to apply the styles.
The Ng-show/Ng-hide directives needs a css-class to show/hide, since it just adds a class to your element when the scope-variable is truthy/falsy.
Ref: https://docs.angularjs.org/api/ng/directive/ngShow
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.
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.