How can I use templates in Angular UI bootstrap dialogs?

Question

I am using the Angular UI bootstrap module for opening a dialog.

There is a option for mentioning the path of template like

$scope.opts = {
            backdrop: true,
            keyboard: true,
            backdropClick: true,
            template: '<p>Template</p>',
            controller: 'TestDialogController'
          }

my app is in site/app then js , partials

I am not able to find how it finds templates

What's your question? What does "my app is in site/app then js , partials" mean? — Stewie
– Stewie, Commented Feb 27, 2013 at 7:22
i mean the all the angular app is inside that folder. that was the folder structure — user192362127
– user192362127, Commented Feb 27, 2013 at 7:58
Show us the layout of your project (html, js, anything relevant...). I would think you should remove the first '/' in your template and use something like template: 'partials/test.html' instead, but it boils down to where the template is relative to the html page itself. — Pascal Belloncle
– Pascal Belloncle, Commented Feb 27, 2013 at 10:08

Kenneth Lynne · Accepted Answer · 2013-04-11 09:10:47Z

6

The Angular UI bootstrap dialog takes either a template inline,

template: '<p>This is a inline template</p>';

or the template url can be specified as both a relative and absolute path.

templateUrl: '/relative/path/dialog.html';

Try to open a browser tab pointing to your template first, and when you successfully have derived the path you can try to add it to your templateUrl.

You can read more about correct usage of the directive here.

edited Apr 11, 2013 at 9:10

answered Mar 29, 2013 at 2:56

Kenneth Lynne

15.6k12 gold badges66 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pipetus · Accepted Answer · 2013-05-03 17:14:05Z

1

There's a use of <script> as a directive which would allow you to make a hybrid approach.

Angular docs mention that if you use a declaration in your html like:

<script type="text/ng-template" id="/tpl.html">
  Content of the template.
</script>

Then you can use it as a reference in a directive such as ngInclude or ngView, and even a service like $route. You can see this working in this fiddle.

edited May 3, 2013 at 17:14

answered May 3, 2013 at 16:36

Pipetus

1,1561 gold badge13 silver badges30 bronze badges

2 Comments

Pipetus Over a year ago

Not sure why -1. I'm talking about angularjs template cache system, which allows a template not to be real html file served by a server, but a portion of html code within your html.

Ian Warner Over a year ago

Yeah the question is specific to Angular UI Bootstrap and the overriding of these templates.

Collectives™ on Stack Overflow

How can I use templates in Angular UI bootstrap dialogs?

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related