如何在 angular.1 x 中使用自定义模板 URL 作为 HTML 元素的属性？答案

【问题标题】：How to use custom template-url as an attribut of HTML element in angular.1x?如何在 angular.1 x 中使用自定义模板 URL 作为 HTML 元素的属性？
【发布时间】：2017-04-13 22:52:50
【问题描述】：

假设我有这样的代码：

<body>
<authentication-form template="./path/to/different/style.HTML" ></authentication>
...
</body>

Authentication-form 是一个组件。它有模板和简单的控制器。如何通过在angular.1x中添加template-url作为HTML元素的属性来使用自定义模板？我正在尝试绑定：{}，但它可能不是我想要的，

【问题讨论】：

在页面中声明组件实例时不能定义模板 url。说明你的需要，也许有什么可以帮助你的。基于Angular 1.5的解决方案合适吗？

标签： javascript html angularjs templates components

【解决方案1】：

我找到了解决方案。我的组件看起来像这样：

angular.module("authentication")
       .component("authentication", {
            templateUrl: function($element, $attrs) {
                return $attrs.templateUrl;
            },
            controller: AuthenticationCtrl,
        });

在 index.html 我有：

<body>
     <authentication template-url="./path/to/template.html></authentication>
</body>

它可以在没有绑定的情况下工作......我不确定它是否可以。

【讨论】：

【解决方案2】：

组件定义在哪里？

你的组件定义应该有一个名为 templateUrl 的属性，然后你把它放在那里。

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

angular.module('sample').component('authenticationForm', {
  templateUrl: './path/to/different/style.HTML',
  controller: AuthenticationFormController,
  bindings: {}
});

那么你的html就简单多了：

<authentication-form></authentication-form>

【讨论】：

感谢您的回答。我的组件看起来像你写的，但我正在寻找不同的方式。我什至不知道是否有可能以不同的方式来做——这就是我问的原因。
html中为什么需要模板路径？