Pass variable to template

[sylouuu]

Hey, thank you for that.

For some requests, I wanna show my loader, sometimes, it must be hidden.

So I have a boolean global variable in $rootScope that I have to pass trough the title attribute. Which is pretty dirty.

Btw, when my loader is shown, I can see the title as a tooltip (HTML standard) with "true" as a string...

Example:

<!-- Loader template -->
<script type="text/ng-template" id="spinner.tpl.html">
    <div ng-if="title === 'true'">
        <div class="spinner-overlay">
            <div class="spinner-container">
                <div class="loader6"></div>
            </div>
        </div>
    </div>
</script>

<!-- Show loader -->
<div ng-http-loader ttl="0" template="spinner.tpl.html" title="{{ page.loader }}"></div>

{{ page.loader }} is a boolean. Beside, this boolean is casted into a string (see my ng-if).

I suggest to add another attribute to do something like this.

<!-- Loader template -->
<script type="text/ng-template" id="spinner.tpl.html">
    <div ng-if="data === true">
        <div class="spinner-overlay">
            <div class="spinner-container">
                <div class="loader6"></div>
            </div>
        </div>
    </div>
</script>

<!-- Show loader -->
<div ng-http-loader ttl="0" template="spinner.tpl.html" data="page.loader"></div>

I hope this is enough clear.

Bests

[zazoomauro]

Hi @sylouuu
I have a different approach. You can enable or disable the loader creating the ng-http-loader directive with a simple ng-if
make sense?

[sylouuu]

Hey,

I tried. It doesn't work as expected.

Regards

[zazoomauro]

Why? The loader will not been shown. Is exactly what you want

[sylouuu]

You have right. I didn't think about that:

<script type="text/ng-template" id="spinner.tpl.html">
    <div>
        <div class="spinner-overlay">
            <div class="spinner-container">
                <div class="loader6"></div>
            </div>
        </div>
    </div>
</script>

<!-- Show loader -->
<div ng-http-loader ttl="0" template="spinner.tpl.html" ng-show="page.loader"></div>

Thanks