Yesterday when I was using older version, everything worked fine. My code looked like this:
<div ng-repeat="widget in widgets" class="box" ng-include="widget.view"></div>
Today I updated to newer version and it seems that it doesn't work anymore. I tried different versions of how to use ng-include and this one below renders a comment where the content should be:
Comment:
<!-- ngInclude: widget.view -->
Code:
<div ng-repeat="widget in widgets" class="box">
<ng-include src="widget.view"></ng-include>
</div>
I've also tried moving views out of partials into script tags but it doesn't help. Before I moved to script tag there was SUCCESSFUL xhr request to partial, but it just didn't render it.
What could be wrong?
Edit: if I change version back without any code modification, everything works again.
Possibly it's this issue https://github.com/angular/angular.js/issues/3627 foo bar foo bar
Related
I'm trying to include some HTML on my software's webpage using ng-include, and I can't seem to get it to work. For now, I am using simplified versions of my end goals for testing purposes.
Relevant snippet of my project tree:
-web
--dragonweb
---src
----app
-----dragon
-------dragon.css
-------dragon.html
-------dragon.spec.ts
-------dragon.ts
-------test.html
dragon.html
<div ng-app = "" ng-controller="test">
testing
<div ng-include="" src="'app/src/dragon/test.html'"></div>
</div>
test.html
<div>
This is an included file
</div>
Expected output on the web page:
testing
This is an included file.
Actual output on the web page:
testing
I've tried using different lengths of the path to test.html, with no luck. I've also been playing around with the use of the ng-controller tag, and syntax for the ng-include tag, with no luck. There are no console errors in the web page. Any idea why it doesn't seem to be working?
Backstory/disclaimer: I was the intern on this project before inheriting it after the lead dev suddenly left, this is my first time doing any sort of web development, and I'm just learning on the job from trial and error. So if I'm doing things wildly incorrect, I am absolutely all ears for how I can improve this process! I chose to try to use ng-include because we already have Angular implemented, and based on my research this seemed like the theoretically easiest way to accomplish what I wanted.
You need to pass the src to ng-include directive not the src attribute:
Ex:
<div ng-include="'app/src/dragon/test.html'"></div>
or use relative path:
<div ng-include="'./test.html'"></div>
Please check out the official documentation for details
Usage:
as element:
<ng-include
src="'string_url'">
...
</ng-include>
as attribute:
<ANY_ELEMENT_TAG
ng-include="'string_url'">
...
</ANY_ELEMENT_TAG>
as CSS class:
<ANY class="ng-include: string; [onload: string;] [autoscroll: string;]"> ... </ANY>
I´m migrating from a really old version of ui-boostrap to the new one.
On the previous version we have only popover="myhtml"
Now is needed to have popover-html and sanatize the html.
The problem is when we have the html inline, when we have the html on a variable of the scope is simple as
uib-popover-html="getPopoverContent(searchResultHtml)"
But the ones that were with the html inline, when i try to use the same syntaxis fails becouse uib-popover-html="getPopoverContent('theHtml')"
theHtml normally have quotes who breaks all
Example of the function that fails
uib-popover-html="getPopoverContent('<ul class="list-unstyled"><li><span class="text-muted">true_ip:</span> {{txn.thm_info.true_ip}}</li>"')
The problem is that the double quotes closes the uib-popover-html, so get broken all.
What is needed here, I tried to scape with / the inner quotes,but failed.
I know that the correct way is do templates, is only for do a quick migration to allow us to gain more time to later migrate all things.
Thanks
You know that the right thing to do is to use a template, and you have an angular expression anyway inside your HTML, so a template is required.
So just do the right thing, and use a template. Don't try to find nasty shortcuts. That will make the code much cleaner as a bonus.
<script type="text/ng-template" id="myPopoverTemplate.html">
<ul class="list-unstyled">
<li><span class="text-muted">true_ip:</span> {{ txn.thm_info.true_ip }}</li>
</ul>
</script>
<button uib-popover-template="'myPopoverTemplate.html'" ...>
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 :)
I'm looking for confirmation or possibly a workaround, this is not intended as a bug report.
TL;DR I think I found a bug, not sure which thing it's in. I've got this html:
<div ui-view>
<ul>
<li><a ui-sref="page">Default</a></li>
<li><a ui-sref=".nestedView">Test</a></li>
</ul>
<div ui-view>
<tabset>
<tab>
<tab-heading>Example</tab-heading>
Tab content, blah blah blah
</tab>
</tabset>
</div>
</div>
and I get this error:
Error: [$compile:ctreq] http://errors.angularjs.org/1.3.0/$compile/ctreq?p0=tabset&p1=tab
happens with angular 1.3.0+ but not 1.2.9
Plunker
Details:
I think I've found a bug with the combination of angular 1.3.0+, angular-ui-router, and angular-ui-bootstrap.
I've got a nested ui-view where the default contains a <tabset> from angular-ui-bootstrap. When I navigate away from the default view I get this error:
Error: [$compile:ctreq] http://errors.angularjs.org/1.3.0/$compile/ctreq?p0=tabset&p1=tab
I've narrowed this down as happening in 1.3.0+ (even the beta 1.4.0) but not in 1.2.9.
Here's the plunker: http://plnkr.co/edit/E0laKNSJGp31q1swQ2jp?p=preview
That's set for version 1.3.0 and shows the error in the console when you switch from the Uno > Tabs view to the Uno > No Tabs view. If you set it to 1.2.9 you'll see it goes away.
This does not appear to impact functionality but it sure is irritating to see that error all the time. For now I'm just going to downgrade my angular version.
SIDE NOTE: I'm really not sure where to submit this bug. My first thought would be to angular-ui-bootstrap, but I'm not certain. If anyone is involved in these projects please direct me. Otherwise I'll just put it in both the angular-ui-router and angular-ui-bootstrap github issues.
I am doing angularjs development and have a bevy of HTML ng-templates included inside tags in my HTML, like so:
<script type="text/ng-template" id="content_listing.html">
<div class="item_content">
<div class="horiz-nav-menu">
<h3> {{sectionName}} </h3>
<ul>
<li ng-repeat="navLink in navLinks"> <a href='#/{{navLink.Target}}' title='{{navLink.Tip}}'>{{navLink.Text}}</a> </li>
</ul>
</div>
</div>
</script>
It's highly annoying that my editor of choice, Vim, does not properly highlight the HTML because it is inside a script tag. As a result, I have created a custom syntax region for Vim and plopped it into a file after/syntax/html.vim which I have confirmed is getting processed when Vim starts up:
unlet b:current_syntax
syn include #HTML $VIMRUNTIME/syntax/html.vim
syn region htmlTemplate start=+<script [^>]*type *=[^>]*text/ng-template[^>]*>+ keepend end=+</script>+me=s-1 contains=#HTML,htmlScriptTag,#htmlPreproc
The problem is that the highlighting behavior is flaky (Vim 7.2). To make the highlighting work properly, I have to do things like scroll down so that the section with HTML scrolls off of the page and then scroll back, hit :e to reload the doc, etc. Also, even when the highlighting is displaying correctly, when I go to edit the HTML inside the tag the highlighting for that block turns off.
I am no expert on Vim syntax highlighting ... has anyone run into a similar thing? It looks to me like my region definition looks fine...