derlin / semantic-modals

AngularJS ModalService for the semantic-UI framework.
http://derlin.github.io/semantic-modals/
Apache License 2.0
8 stars 1 forks source link

Template is not displayed when gotten from $http #4

Closed kabukki closed 7 years ago

kabukki commented 7 years ago

I noticed that the first time the modal shows up, it's just a black screen, but the second time it works well. This is due to it getting loaded from $templateCache on the second try.

My template (located in templates/ directory)

<script type='text/ng-template' id='templates/confirmModal.html'>
    <div class='ui basic modal'>
        <div class='ui icon header'>
            <i class='trash icon'></i>
            Confirm deletion
        </div>
        <div class='content'>
            <p>Are you sure you wish to delete this project ? This cannot be undone</p>
        </div>
        <div class='actions'>
            <div class='ui red basic cancel inverted button' ng-click='close(false)'><i class="remove icon"></i> Cancel</div>
            <div class='ui green approve inverted button' ng-click='close(true)'><i class="checkmark icon"></i> OK</div>
        </div>
    </div>
</script>

And how I call showModal :

ModalService.showModal({
    templateUrl: 'templates/confirmModal.html'
})

Thanks for this neat tool by the way !

derlin commented 7 years ago

Hi there, thank you for your input !

There was a problem indeed. I fixed it in 4de2406216c81a4e89ecf4d1f38ed81625860b07 and added some explanation on the demosite.

Now, templateUrl is replaced by templateId. In a case like yours, where the filepath and the template id are the same, just the templateId is enough.

In case you have multiple templates in one file (or a filepath that is different from the template id), you need to set both properties: templateUrl for the filepath, templateId for the template you want.

Let me know if you still encounter any issues.

kabukki commented 7 years ago

Thank you very much, it works as expected now ! I can use my custom templates :smile: