Ng-include Alternative

ionic-v1
1

Hi guys,

seems that ng-include doesn’t work, can you suggest some tecnique to include the same part of content in multiple views?

@mhartington
Thank you

2

What do you mean ng-include doesn’t work? I added it to a div in my project and it pulled in that html correctly. Here is how I used it:

<div ng-include src="'returnDate.html'"></div>

But, if you don’t want to use ng-include you can use a directive. I have this for example used on multiple views.

HTML to call the directive (placed where I want it in each view):

<current-trip-information></current-trip-information>

JS for the directive:

app.directive('currentTripInformation', function() {
    return {
        restrict: 'E',
        transclude: true,
        templateUrl: 'templates/currentTripInformation.html'
    };
});

currentTripInformation.html:

<div class="relative-position" ng-transcludes>
    <!-- all content for the html -->
</div>
3

Yup, ng-include does work.

Maybe something that tripped you up, which got me as well, was that the value needs to be a string.
So this is valid

ng-include src="'returnDate.html'"

But not this

ng-include src="returnDate.html"
2 Likes
4

@mhartington you’re in right! searching in the forum i found other issues related on it, but the problem was the lack of ’ ’

1 Like
5

The problem with ng-include is that with ‘ionic serve’ it blocks me to use Chrome to test how the app behaves when the connection is lost. I disable network in Chrom dev tools but this also blocks the connection to localhost thus I don’t see my error message but the Chrome general “network error” instead :frowning:

7

i’m using the ng-include=“myapp.html” in ion-slide in ionic-slide-box
my html page is loaded but the page is not scrolling
i have used “ion-scroll” and "“autoscroll” attribute in ng-include for the scroll bar
but no result

and i had even changed the the “overflow” to “scroll” and “height” to auto in my css file
but no use

is there any other solution