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
@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.
Thanks @rschmukler. I was placing the template outside the tag with ng-app.
Awesome! Closing
Most helpful comment
@diogodomanski the
#save-dialog.tmpl.html
must be a child of the$rootElement
(ie. where you have theng-app
. You mentioned putting it in thebody
element. Is yourng-app
a sibling / child of your template?See this pen for an example of it working.