I'm trying to split up my HUGE main.html page into smaller parts so it will be better maintainable. It seems that ng-include is the way to go since i'm using angular already.
I'm not sure, but as soon as I use ng-include it seems the CSS of my website seems to fail... there's no error in the Crome console
Here's my main.html
<div ng-include src="'AddRegion.html'"></div>
<div class="addbutton">
ADD
</div>
and here is my AddRegions.html
<div class="popup">
<h2>Add Region</h2>
<a class="closeBut" href="Main.html#close" ng-click="showAdminMenuContainer()"></a>
</div>
I already tried putting the code within the divs, i also tried adding the ng-include on top of the main.html like:
<ng-include src="'AddRegion.html'"></ng-include>
But that doesn't seem to work for me. The files are in the root, so no folder problems, Crome is not giving any errors in the console.
Related
I have a simple search form which I have it included in two different pages using ng-include directive. I would like to bind them both to the same scope in such a way that when the user navigates between the pages, they'll keep seeing the same search data they've entered in either of the copies.
I have managed to implement an untidy solution using rootScope, but would like to know if this can be implemented in a proper, cleaner way?
I also used root scope slove it, my layout below:
<div id="page-header" ng-include="'views/layouts/header.html'"></div>
<div id="content">
<div ui-view="content" ng-cloak></div>
</div>
<div id="page-footer" ng-include="'views/layouts/footer.html'"></div>
<div id="toastElement">
<ul id="toastBox"></ul>
</div>
header.html bound HeaderController, the functions in HeaderController include search, login, logout, register and both working on $rootScope. Is it helpful?
If I use a ng-view nested in an element that has a controller defined, will that controller interfere with the controllers that are loaded by ng-view (html file loaded)?
In my initial tests nothing happened, but I'm still in doubt if I tested it wrongly if it really allows it.
<div class="container-fluid" ng-controller="ExampleController">
<ng-view></ng-view>
</div>
I'm currently working on a project, that I've got some problems with. Whatever I try to do, ng-include can't load a partial view I have in another folder.
I want to load view.html file in pagination folder. My file is in the folder which is on the same level that pagination folder.
Here's my site view fragment
<div class="container">
<div class="col-sm-6" id="NEWS">
<div class="well" ng-repeat="info in news">
<p>
{{info.description}}
</p>
</div>
<ng-include src="'/pagination/view.html'"></ng-include>
</div>
</div>
My view.html has a single caption test for testing purpose.
I also tried using this code:
<div ng-include src=....
<div ng-include="....
<ng-include src="'../pagination/view.html".
Nothing seems to work. Someone knows what is the problem about?
My file is in the folder which is on the same level that pagination folder.
You're propably passing a wrong path for the html template.
You have to refer to your template directory as if you're writing in your index.html file. So no matter which html template the ng-include directive exists you have to give it the path as if your root is the place where index.html exists.
Also try to avoid using '/' before the path.
e.g.
Suppose you're having the following folder tree:
---index.html
---/templates/app.html
---/tempates/pagination/view.html
In case you're trying to include the view.html in your app.html then you would do it like this:
<ng-include src="'templates/pagination/view.html'"></ng-include>
I hope it helps.
The cause of this type error are
passing a wrong path for the html template.
Passing path is not in lower case .
In angularJS all reference path must be in lower case like
<div ng-include="'/content/patna/partials/skive/test-partial.html'"></div>
I am trying to use ng-repeat to spit out part of a url (my.url) within ng-include. Unfortunately I cant seem to get it to work. It works when I dont place it within an ng-include, so I know that part isnt the issue. THe issue seems to be when I place {{my.url}} inside ng-repeat and attached to the first (static) part of the url.
What i am aiming for is the ng-include to use "filepath/filepath/mypage.html
my.url is the mypage.html bit.
Anybody able to advise?
<uib-tab ng-repeat="stuff in myList" heading="{{my.text}}" class="sg-tabbed-titles">
<div class="tab">
<ul class="tabbed-list">
<li class="tab-content">
<div ng-include="'\filepath/filepath/{{my.url}}\'"></div>
</li>
It should be
<div ng-include="'filepath/filepath/' + my.url"></div>
ngInclude takes expression. It means that you need to use normal string concatenation just like you would do in regular javascript code.
I have a template that is inserted via ng-include and that template also has an ng-include. The inner ng-incude is not being shown. Why?
Main Template:
<div ng-include src="'views/outer.html'"></div>
views/outer.html:
<div ng-repeat="item in items">
// Stuff
<div ng-include src="'views/inner.html'"></div> // not being shown
// More stuff
</div>
The code you posted should work so the problem is probably situated somewhere else.
One of the reasons could be that a JavaScript error is thrown somewhere else or that no items are found in the scope. Make sure to check the browser console.
Here is a working version of your code for your convenience:
http://plnkr.co/edit/pCTInrtITqHraC1hPyZH?p=preview
Hope that helps!
ng-include is a directive. Your view/outer.html should do like this:
$parent.items
Because directive not inherit parent automatically.