I'm pretty new to angularjs and I've stumbled upon a strange bug.
I made a timeline using CSS and HTML, and then used ng-repeat to dynamically generate it. However, on Webkit browsers, the timeline isn't displayed correctly.
Unfortunately I can't embed images in my post because my account is new, so I uploaded them here :
Webkit render
http://i.imgur.com/Gdt2h5F.png
However, if I resize the window, open the console or change any CSS properties, the timeline now looks fine :
http://i.imgur.com/5yCXSfs.png
It also works flawlessly on Firefox or Safari with no reflow needed.
I've looked into $scope.$apply, but that doesn't work because I'm using angular to generate the values, so I can't call it and it should be called automatically by angular anyway.
Please note that if I create the <ul><li></li></ul> manually, the timeline displays correctly.
Here's the code sample :
<h1>Relevés</h1>
<ul>
<li ng-repeat="batch in batches track by batch.id">
<span class="date" ng-bind="batch.createdAt | amDateFormat: 'DD/MM/YY'"></span>
</li>
</ul>
Also, when this bug occurs, I can see artefacts of the timeline on other partial views when changing pages, and this occurs only on Chrome (without any extension).
Related
My company has created a generic application that launches custom applications within an iframe. The parent window allows end users to click on an item within a worklist, and depending on what they've clicked on, we navigate to a launch controller which will build up a url to the product associated with the task. We then load that product application into an iframe within the launch view.
We are seeing duplicate static content files (js and partial templates) existing inside IE's developer tools.
Image of dev tools
Bundled js as well
We end up seeing additional copies of the file after every load the iframe. Since we're an SPA the assumption was that these files would be cached (which they are in all browsers except for IE). Each file is served up from the same web server. We even notice that if we dont set a breakpoint in the correct instance of the js file it wont get hit.
We have tried numerous things including removal of the iframe in the destroy event within the launch controller (since the frame gets added to the window object, we figured it was living on forever). We've ensured that the iframe has a valid ng-src tag as well as using $sce for the dynamically created url.
Since we require the iframe to be loaded via a POST from a form, we're doing something like this which is a super hacky way of submitting a POST. The snippet wont run as is but i wanted to include info on how we're populating our iframe.
function launch() {
//return launchService.launch(vm.url, buildLaunchRequest()).then(success, error);
$timeout(function() {
$("#productForm").submit().remove();
}, 1);
}
launch();
<div id="launch" class="container-fluid ss-container">
<iframe name="productFrame" id="productFrame" data-ng-src="{{vm.url}}" resize-frame />
</div>
<form id="productForm" role="form" method="post" action="{{vm.url}}" name="productForm" target="productFrame">
<input type="hidden" name="user" ng-value="vm.user" id="user" />
<input type="hidden" name="authToken" ng-value="vm.authToken" id="authToken" />
<input type="hidden" data-ng-repeat="(k,v) in vm.styles" name="{{k}}" value="{{v}}" />
</form>
Im sure there is a better way to submit a form with the target being an iframe but at the moment nothing seems to have worked for us.
If anyone has seen this duplicate source file issue and/or knows the proper way to submit a form with generated inputs automatically when the controller is loaded please help us out!
Thanks,
Jake
Turns out it was some weird issue with how IE caches the iframe if you dont clear out the src tag on the iframe that causes this.
This question helped identify the issue:
IE8 reloads dynamic iframe content from cache into the wrong iframe
It somehow would add a clone of the iframe to the parent window every time the angular view was loaded regardless of the src being the same. Clearing the src tag out on $destroy of our angular controller seems to kick IE into actually removing the node from the dom. We even tried $("#productFrame").remove() without any luck. Removing the src attrib didnt work as well.
What worked was $("#productFrame").attr("src", "").remove();
I'm building a project with angularJS. I use ui-router for views, and nested views.
So I have a index.html with just the header, the footer and a "general" ui-view where I load asychronously the Home-view, Contacts-view, About-view, etc.
On the "home" page and on the "about" page there are two different Adobe Edge animations.
They work like charm when I load them for the first time, but when I navigate through the website and then I come back to the home or the about page nothing appears.
I've tried loading the edge scripts in different ways
in the index.html head with the script tags
in a angular directive
in the controller
during the routing processes via the resolve option of ui-router
None of this strategies fixed the problem. The animations still play just once.
Finally I decided diving in the js code crafted automatically by Adobe Edge (I'm not a designer, I have no idea on how to create animation with Edge).
I found that Edge create an AdobeEdge object and bind it to the window... then call the animation throught an event handler in a jQuery anonymous function
(function($, Edge, compId){
....
$(window).ready(function() {
Edge.launchComposition(compId);
});
})(jQuery, AdobeEdge, "EDGE-123456");
On the official Adobe documentation (really bad!) there are some methods to call on the AdobeEdge object...
I tryied to insert in the home-controller the following line
$window.AdobeEdge.getComposition("EDGE-123456").getStage().play();
but doesn't work.
After a wasted whole day I'm frustrated, I hate who ho conceived Adobe Edge scripting and overall I need an help to fix it the right way (beofore implementing horrible workaround).
Thank you
Try using playAll(). I imagine this plays all the Symbol timelines at once (it's difficult to know for sure since the documentation is so vague), but I've found it works for my purposes.
$window.AdobeEdge.getComposition("EDGE-123456").getStage().playAll();
Latest Update:
This got fixed in the new masonry version.
Original Post:
I have an AngularJS website with Bootstrap3 style, which works fine in Chrome, Safari and Firefox, but not in IE (and I thought those days would be over).
I use the Masonry-plugin to display some tiles. The first time I open the page IE11 sticks the tiles together. I believe it is because of some problem with the padding in bootstrap. When trying to debug the application or only show variable contents on console.log everything works fine. Also after reloading the page everything is rendered as expected, it is really only on the first time the page is accessed.
I've noticed that Masonry's website and examples work with IE so I'm trying to figure out what they have different.
The above mentioned problems also occur in IE10 - I don't have any information about IE9 and we don't intend to support IE8 or before.
Update: I've noticed that the masonry website doesn't use paddings (like bootstrap does) but margins instead, and indeed when I remove paddings and add margins, it works. However the question remains - Why doesn't it work with paddings?
Update 2: I have a working test which shows the error. It is quite extensive, and can be accessed here: http://server.grman.at/ie11-intro.html
It shows that the problem only occurs in IE, if the some script (probably the masonry library) is pre-loaded on a page before and afterwards used.
Here a screenshot of how it should look from Chrome:
And here a screenshot of how it looks for me in IE11:
Last Update: Yes, it's the masonry script, I've created a second intro page: http://server.grman.at/ie11-intro2.html which doesn't preload the masonry script and it works, now the quesion is - WHY?
After playing around with your demo a bit, I found that loading masonry.pkgd.min.js before Bootstrap and custom styles would resolve the issue for me. Something in Masonry's setup is breaking re-navigations in Internet Explorer - though I don't have specifics at this time.
Move the masonry script tag to the top of your document, above Bootstrap and your styles, and you should find that the issue is resolved.
The obvious and fast answer (as I'm not sure if the error is fixable in the masonry script in the first place) is, to remove a reference to the masonry script whenever you are not going to use it in the website.
Update:
This got fixed in the newer masonry version
I made a little chrome extension with angularjs and bootstrap. I have a alert like this:
<div class="alert alert-danger" role="alert" ng-show="errorMailZR">error</div>
and in angularjs controller :
$scope.errorMailZR = false;
i put it to false because i see the alert by default, it's not hidden :/ but in single web page when i go on it with browser, everything is ok. So, what i need for it's works in chrome extension ?
ng-show="false" doesn't work too in chrome extension...
UPDATE:
https://docs.angularjs.org/api/ng/directive/ngCsp#!
In order to run angular on an extension page, you have to use the ng-csp directive, or satisfy the ng-csp policies. I'm assuming you've done this, or nothing would be working at all.
Doing so turns off inline style insertion, this line in particular in angular.js (showing for reference, not for modification!):
!window.angular.$$csp().noInlineStyle && window.angular.element(document.head).prepend('<style type="text/css">#charset "UTF-8";[ng\\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide:not(.ng-hide-animate){display:none !important;}ng\\:form{display:block;}.ng-animate-shim{visibility:hidden;}.ng-anchor{position:absolute;}</style>');
To get directives that rely on classes like ng-hide, ng-animate, ng-cloak, to work, manually link to the classes using:
<link rel="stylesheet" href="path/to/angular/angular-csp.css">
That's all there is to it.
OLD HACKY STUFF
Immediate fix, add this to your document head:
<style type="text/css">#charset "UTF-8";[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide:not(.ng-hide-animate){display:none !important;}ng\:form{display:block;}.ng-animate-shim{visibility:hidden;}.ng-anchor{position:absolute;}</style>
Ng-show and hide work by angular adding the class ng-hide to items that are hidden and removing it when they are shown.
Why doesn't it work in extensions?
Good question. For whatever reason (will update when I find the reason) chrome extensions prevent that style tag from being added to the head. It's probably some kind of security thingy, and there's probably a way to turn off that security bit, I'll update when I find out more.
You can debug chrome extension in chrome, just click right on extension popup. my guess is that angularjs isn't loaded or bootstraped in your extension, from my experience you should rather load angular from local files rather than CDN
I'm trying to scrape data from a webpage and firebug shows the data I want to extract but it's not shown in the source code when I right click "show source code".
Is this because firebug shows the dynamic content which gets loaded by javascript etc?
Is phantomjs and casperjs the best way of extracting the contents of this page, including all the div elements. I need to extract the data shown by firebug.
Does casper js have a casper.GrabHTML method, like mechanize and beautifulsoup? which will get all of the dom elements, like clsses, hrefs , links, buttons, text etc
This is the order in which stuff happens:
PHP generates HTML
Browser loads HTML
JavaScript manipulate loaded HTML
Why is this?
The view source browser feature normally shows the plain HTML as received by the browser. Other advanced tools like Firefug are able to display the current HTML after being changed by JavaScript. (Firefox itself has this feature as well: just right click on some generated HTML and choose "View selected source".)
How can I access the full (firebug html)?
I'm not sure about the HTML tab but the Network tab always displays documents as received from the server.
Can I do it in php/javascript?
PHP is no longer running when the original HTML reaches the browser.
JavaScript can display HTML with the .innerHTML property of any DOM node.