Material: $mdDialog not finding template with <script type="text/ng-template">

Created on 19 May 2015 · 3Comments · Source: angular/material

I'm trying to show a dialog whose content come from a <script type="text/ng-template"> tag, but it's not working.

In index.html file I have the following code inside <body>

<script type="text/ng-template" id="save-dialog.tmpl.html">
   my dialog template content
</script>

In index.js file have the following code

             $scope.submitData = function ($event) {
            $mdDialog.show({
                controller: 'SaveDataController',
                targetEvent: $event,
                templateUrl: 'save-dialog.tmpl.html'    
            })
            .then(function (answer) {
                console.log(answer);
            }, function () {
                console.log('failure');
            });
        };

Whenever I call $scope.submitData(), $mdDialog is trying to use http://my.domain/save-dialog.tmpl.html url instead of the one defined with ng-template. What am I doing wrong?

Thanks

demo

Source

diogodomanski

Most helpful comment

@diogodomanski the #save-dialog.tmpl.html must be a child of the $rootElement (ie. where you have the ng-app. You mentioned putting it in the body element. Is your ng-app a sibling / child of your template?

See this pen for an example of it working.