CODEWITHSUNDEEP
angularjsangularjs-directive
Zhongmin
Zhongmin

Reputation: 1751

angular ui-route state template with custom html tag

$stateProvider.state('abc', {
                url: '/:id',
                modal: true,
                template: '<abc></abc>'
            })

can I have custom html tag in template property?, e.g. 'abc', I was looking at someone else code but I don't understand how this works, I do have abc.html processed by gulp templatecache stuff. and it is loaded in a modal dialog correctly.

the file is at 'src/app/components/abc/abc.html', how come the template 'abc' knows which html to load? I suppose there must be a definition for 'abc' directive somewhere? but I can't find it.

Upvotes: 1

Views: 1469

Answers (3)

Zhongmin
Zhongmin

Reputation: 1751

I finally figured how it works, turns out the custom html tag is defined by a 'component' and there is some naming convention making this work. http://blog.grossman.io/angular-1-component-based-architecture-2/

https://docs.angularjs.org/guide/component-router

Upvotes: 2

CozyAzure
CozyAzure

Reputation: 8478

Yes, you can use custom html. UI Router provides you two choices, either you give the template or the templateUrl, which for the first one you have to write your html in a string literal, and latter you can set a html file location.

using template with string literal:

$stateProvider.state('abc', {
  url: '/:id',
  modal: true,
  template: '<abc></abc>' // this is correct!
})

using templateUrl with html files.

$stateProvider.state('abc', {
  url: '/:id',
  modal: true,
  templateUrl: '/path/to/abc.html' // if you have a file named `abc.html` in directory `path/to`, the template will be loaded
})

Upvotes: 0

zoom
zoom

Reputation: 1756

Can I have custom html tag in template property

Yes, of course. Templates can use custom directives no matter how they are defined.

There should be an 'abc' directive somewhere in your module code or one of its dependencies.

See this SO question to be able to list the registered directives of your module and submodules in the console.

Upvotes: 0

Related Questions