Question

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

我可以在模板属性中使用自定义html标记吗？＆＃39; abc＆＃39;，我正在查看别人的代码，但我不明白这是如何工作的，我确实有gulp templatecache处理的abc.html。它正确加载到模态对话框中。

该文件位于＆＃39; src / app / components / abc / abc.html＆＃39;，为什么模板＆＃39; abc＆＃39;知道要加载哪个html？我想必须有一个定义为＆＃39; abc＆＃39;指令某处？但是我无法找到它。

Answer 1

我终于知道它是如何工作的，结果是自定义的html标签是由一个＆＃39;组件定义的。并且有一些命名惯例使这项工作。 http://blog.grossman.io/angular-1-component-based-architecture-2/

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

Answer 2

我可以在模板属性
中使用自定义html标记吗？

是的，当然。无论they are defined如何，模板都可以使用自定义指令。

模块代码或其中一个依赖项中应该有一个'abc'指令。

请参阅this SO question，以便能够在控制台中列出模块和子模块的已注册指令。

Answer 3

是的，您可以使用自定义HTML。 UI路由器为您提供了两种选择，您可以选择template或templateUrl，对于第一个，您必须在字符串文字中编写html，然后您可以设置html文件位置。

将template与字符串文字一起使用：

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

将templateUrl与html文件一起使用。

$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
})

带有自定义html标记的角度ui-route状态模板

3 个答案: