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.
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>
To bind html content to div I use ng-bind-html. When I try to bind larger HTML it takes 5-6 seconds. This works fine in chrome browser. I use $sce.trustAsHtml() to make the HTML trusted. Has anyone run into similar issue?
When I use $sce.getTrustedHtml() this delay doesn't happen since the HTML is already sanitized and browser simply binds the HTML with out doing any sanity check. It seems to me that when we use $sce.trustAsHtml() edge browser is doing sanity check and it is very slow.
Is it possible to inject a HTML, CSS and JavaScript into a block in EPIServer?
I tried to add some HTML and it disappear after saving.
I do not have development access to the CMS but only as a Editor.
In the case a developer have implemented and configured TinyMCEPluginNonVisual it would be possible. Otherwise no.
Allow custom HTML attributes in TinyMCE in EPiServer
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 am using the Routing and Multiple Views feature of AngularJS but I don't see the HTML partial file (or the embedded Javascript) in Chrome's "Sources" tab of the Developer Tools.
In my index.html file, it includes all the tags for AngularJS, jQuery and Bootstrap along with my custom app/controller Javascript file. These files all appear in the Sources tab.
My application works correctly. As I click around between the links on the page, the partial HTML files are loaded and displayed and the files are listed in the Network tab.
The problem is that the partial HTML files do not appear in the Sources tab. How can I debug the Javascript in those partial files?
It looks like the closest thing to a debugger is Zone.js from the Angular team, especially since it will be built right into AngularJS in the future.
This means adding some more code, but the benefits seem to outweigh the cost.