Is there an equivalent of "blah" + variable + "blah" in Angular?

Issue

This actually works:

<div ng-include="'/partials/' + items.my_filename + '.html'"></div>

But even though it finds the file it still gives me an error:

GET http://localhost:9000/partials/.html 404 (Not Found) 

I'm glad it works but does anyone know how to get rid of the error?

EDIT: it's pulling the variable from a remote database, could the delay be causing the error?

EDIT2: Yep, that's what's causing it. I think this is a question for Firebase.

Solution

Use ng-if

<div ng-if="items.my_filename" ng-include="'/partials/' + items.my_filename + '.html'"></div>

Example: With ng-if: http://jsfiddle.net/TheSharpieOne/daFhp/1/ Notice only one call, with the file name (which would work if that file was there).

Example: Without ng-if: http://jsfiddle.net/TheSharpieOne/daFhp/ Notice the two calls, one without the var/file name. One with the file name (which would work if that file was there).

I am using $timeout in the examples to simulate delay in AJAX calls.

ng-if prevents the bad call.

UPDATE
Newer versions of AngularJS (1.2.0-rc3+) will have problems when you have ng-if on the same element as ng-include. To fix this you can simply wrap your ng-include element in an element with ng-if.

<div ng-if="items.my_filename">
    <div ng-include="'/partials/' + items.my_filename + '.html'"></div>
</div>

Answered By - TheSharpieOne