I am using hogan.js compiling on the fly from templates stored in a script tag
<script type="text/html" id="template-id">{{hulk}}</script>
This works fine everywhere except ie7 where it just renders all the templates blank. I can see hogan is getting the html from inside the script tag but once it comes to template.render(), nothing!
Thanks
Works now with hogan 2.0.0 https://github.com/twitter/hogan.js
Related
We have reactjs components using some external(coffee script widgets) exported globally using expose-loader. It works fine on chrome, but facing issue on IE11 Globally exposed modules are not accessible. Gives below error SCRIPT5009: 'dashboard' is undefined.
exposed module as below
require("expose-loader?widgets!../widgets");
When we try to access window.widgets or widgets it gives undefined on IE11, but works fine on Chrome
Double-check how your script files are being inserted. I was running into a similar issue with jQuery on a webpack-powered legacy Wordpress site. I just discovered that adding type="module" into my script tags was breaking the expose-loader on IE11. As soon as I removed that attribute from my script tags, everything started firing fine again in IE11.
For example, this will break IE11:
<script defer src="myModule.js" type="module" crossorigin>
While this won't:
<script defer src="myModule.js" crossorigin>
Maybe a trivial question here (new to Angular) - however can't seem to find any definitive answer.
Am trying a simple script within it and it doesn't seem to work, is a <script> within the ng-view html allowed?
So in my index.html i have the usual:
<ng-view></ng-view>
And in my ng-view (set by /when) - the page shows "Here is my ng-view content" so i know the ng-view works. Just the script isn't working.
<script>
alert('its working')
</script>
Here is my ng-view content
Thanks.
No <script> tags are not read in the view because that's the way jqLite in angular works. If you want scripts in templates to be evaluated, include jQuery before AngularJS. If jQuery is included, the script will be evaluated. Try removing jQuery, and you see the originally observed behavior.
Working Plunker
You will see that if you comment the jQuery script the alert won't work.
Angular jQlite Docs
You can also include the custom JavaScript files in the index page.
I tried working on the following plunker example which works fine with angular version 1.2.x.
But when the angular version is updated from 1.2.x to 1.3.x.
It does not seem to work.
The views does not seem to change when I click on the other tab.
http://plnkr.co/edit/nmTggEdWIcMW5bMRKiok?p=preview
The following change was made to the plunker.
<script data-require="angular.js#1.3.x" src="http://code.angularjs.org/1.3.15/angular.js" data-semver="1.3.15"></script>
<script data-require="angular-animate#*" data-semver="1.3.15" src="http://code.angularjs.org/1.3.15/angular-animate.js"></script>
When tried on the chrome, there were no errors generated on the browser console but the views did not change when clicked on the second tab. Browser used Chrome-latest-version.
Might be a duplicate of
AngularJS, animations with ui router which versions work?
PS: I tried different combination of the bootstrap versions and angular-ui-router versions with angular 1.3.x. Was not able to find a successful combination. I use angular-material-design which requires angularjs version to be 1.3.x. Any help on this issue would be appreciated.
I am using a Bootstrap 3 based template called Unify and implemented Angular JS with ui-routing. Most of it works fine. Just my whole navigation is in the header and I use ng-include to inject the header from a html template file. Them the hover dropdown js plugin does not work anymore. My Code looks something like this.
<header ng-include="'templates/header.html'"></header>
<!--=== Content Part ===-->
<div class="container">
<div class="row" >
<div ui-view autoscroll="false"></div>
</div>
<footer ng-include="'templates/footer.html'"></footer>
and the plugin is called before the tag with the rest of scripts needed.
It works fine when I use the files as is without the Angular JS it also works fine with Angular JS if I don't inject the code but leave it in the index.html as is but not as now.
Hopefully somebody can help me out because I have the same problem with the parallax slider with for convenience sake I just keep in the index.html for now.
Thanks,
Gerd
Thanks to the detailed answer Chris T gave me in another question I found it is a scope related issue. Now I am loading the hover dropdown js within the template file and it works fine.
I ran into the same issue, and tried loading the hover dropdown js in a script tag in the template. That resulted in an error (Like the one here: Can AngularJS ng-include load a Jinja2 processed html on FLASK?)
So instead of doing that, I got it to work by creating a controller for my template and inside the controller I added the drop down hover via:
$('.dropdown-toggle').dropdownHover(options);
I need help. I build web app with angularjs 1.2.5 and angular-ui-router. When I use angular-ui-router v0.2.0 all works fine. But when I have upgraded angular-ui-router to v0.2.5 or v0.2.7 I see empty page. At chrome DevTools console I see that all templates run but nothing showing on page. And are no errors in DevTools console.
I had the same experience moving from v0.2.0 to v0.2.7. Removing ng-cloak from the ui-view element was the solution in my case.
I changed
<div ui-view="page-wrapper" class="ng-cloak" ng-cloak></div>
to
<div ui-view="page-wrapper"></div>
I moved ng-cloak to the template.