If ngInclude doesn't work on device and you can't figure out why


#1

Continuing the discussion from Ng-include Alternative:

I had a problem where ngInclude was working fine when testing in browser but failed without error on my device (Android phone).

Previously it had worked fine when I was using partials defined on my page of origin (index.html) using the
<script id="templateName">partial html here</script>
in both browser and phone. The problem only occurred when I moved these partials into their own files. Still working in browser but not phone.

I checked my paths over and over, tried absolute and relative paths, made triple, quadruple, quintuple sure I was using the single quote inside the double quote for my src attribute. I even thought it might be the Content-Security-Policy. Nothing helped.

Eventually as an experiment, I tried the method above, i.e. created my own directive and included the template that way. Et viola suddenly all is sweet: it worked! On phone and browser. No idea why.

But, if nothing else is helping, try it.
my directive:

.directive('stkincluder', function () {
        return {
            transclude: true,
            templateUrl: function (tE, eA) {
                return eA.src;
            }
        }
    });

in page:

    <stkincluder src="templates/mainContent.html"></stkincluder>

I hope this helps anyone else in same situation. And thanks for that tip from brandyshea