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
Related
I'm making a script to preview email templates so I'm getting a full HTML page (with ) and I'm willing to make a popup with this page.
I'm getting the result from an API that gave me the full code inside a variable.
How to display this page inside my app without surcharging the styles ?
Thank you
Ps: I can't use an iframe since I can't get the preview from a simple get query (without header)
You can try one of these options (all of them have drawbacks)
ng-bind-html (AngualrJS directive) - doesn't provide styles encapsulation
iFrame - provides styles encapsulation, browser compatibility is not a problem. Still, you may need to set up or adjust your CSP policies if you are worried about security or have it already in place.
Shadow DOM - provides styles encapsulation, but you need to make sure it fits your supported browsers, and it's quite tricky to implement for AngularJS
UPD: based on your recent update, I guess you can proceed with ng-bind-html directive (HTML content will be sanitized, but you will have to cope with styles intersection and head & body tags warnings). If it doesn't work - try iFrame based on the approach referenced above (you don't need to make any external queries/requests for that).
iframe is the tag which you can use for call other html pages into your web page
<iframe src="http://www.page.com" name="targetframe" allowTransparency="true" scrolling="no" frameborder="0" >
</iframe>
I have got an angular project generated with yeoman/generator-angular with both mobile and desktop views. The mobile templates heavily rely on mobile-angular-ui and it works just fine in development.
For some reason the modals are not displayed after grunt build. Instead, calling a modal would act as if a transparent component was added on top of the page (I mean, with the highest z-index), stealing the focus in the same way that a modal would do. As a consequence, the modal itself is not displayed and the page does not respond to any click event (assuming the fake modal is locking the focus).
The content of my modals is loaded via ng-include directives and it seems to work (from what I can see in the network tool of Chrome). There are no error message complaining about a missing resource in the console and the only thing I can think of is that the code responsible for toggling the modals visibility in mobile-angular-ui was somehow impacted by the build process. Sounds possible?
Any idea of what could cause this difference of behaviour between dev and production?
I am using mobile-angular-ui 1.2.0-beta.11. Feel free to request more information.
Bingo. The problem actually came from a clash between mobile-angular-ui and bootstrap, as I was using both of them for the mobile and desktop views respectively.
Since I use a very limited subset of bootstrap, I decided to remove all my bootstrap dependencies and only work with mobile-angular-ui which also provides a minimalist support for desktop views (namely col-md-xx etc. for responsive layouts).
I don't know about mobile-angular-ui, but in Angular ui-bootstrap you need to include not only the main code but also the templates:
<script src="bower_components/angular-bootstrap/ui-bootstrap.min.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
When you don't include the tpls, the development is still working, because it's able to load the files from their location in bower_components.
In production you get a similar result as you describe when using modals, because the templates were not bundled in your dist directory. Maybe it's a similar problem?
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 confused about the behavior of ng-hide and ng-show in my chrome extension : https://chrome.google.com/webstore/detail/zombiereport/nmojhgiclaimobhpljphbfgmabfmncin
when i put it on the web it's work good : http://1ffa3ba638.url-de-test.ws/zombieReport/partials/popup.html
In the form, ng-show et ng-hide are automatically visible by default (in extension).
I had this same problem. Make sure you include the angular-csp.css file in your extensions index.html file. You can download it here. Also make sure to use the ng-csp directive on the html tag.
Let me know if this works for you.
I am trying to debug my AngularJS app where display:none is injected in tag as shown below:
This is how the img tag should be displayed:
<img ng-src="{{clientImage}}" style="margin: 0 0 0 5px;" />
This is what I get:
<img ng-src="{{clientImage}}" style="margin: 0 0 0 5px; display: none !important;" />
Can someone please help me by suggesting how I can trace how the (display: none !important;) is injected? Also any thoughts on what could possibly be injecting this in my img tag?
Notes:
- This problem happens only on some browsers but not all browsers, actually I've tried reproducing the bug on same browser version but on two different machines but failed.
- I am using Chrome latest version for testing
Turn off ad block.
I had an image named 'Advert.png', spent too much time to realize ad block was blocking it ¬¬.
This issue comes when adblocker extension is used in browsers when you'll pause you'll be able to see the images and this inline CSS will not be shown.
I had a similar situation. it was because of the ad blocker I had installed on Chrome. My application worked fine on Firefox which didn't have an ad blocker installed. But chrome didn't show an element.
After few hours of Googling I figured out that the id of the element which was not shown by chrome was the issue. The Id I had for the particular element was "post-ad". I changed it to "make-new".
That's it. It started working :)
I think Ad blockers find certain ID s and names of the html pages to decide whether to show it or not.
Hope this helps somebody
I had this happened to me when loading images from src attrib,
the inline style "style="display: none !important;" was added for some images.
Try disabling the angular inspector plugins in Chrome.
It happened to me in normal mode, but in incognito mode,firefox,opera,mobile everything was ok.
First of all, check in DevTools if it's showing which CSS rule hides that.
It should give you file and line. If it's not, try disabling Javascript to see if that helps. Or scan manually the files and look for .hide(), .toggle(), etc. (if jQuery is used).
To debug further, you can try to set the breakpoint on subtree & attributes modifications by selecting the element and in context menu select 'Break on...' (as shown below).
You may also try Visual Event. See also: How to find event listeners on a DOM node?