javascript - 如何在指令模板中包含模板?

标签 javascript angularjs templates angularjs-directive angularjs-ng-include

如何在 Angular Directive(指令)的模板中包含 .html 模板?

我目前包含模板的方式成功地将模板的 HTML 拉入指令模板,但模板中的变量未链接到 Controller 。

这是我目前正在做的:

_directive_template.html

<section>
  ...
 <div ng-include="'/templates/_template_to_be_included.html'"></div>
  ...
</section> 

_template_to_be_included.html

 <form>
    <input ng-model="some_value">
    <button type="submit">Update</button>
 </form>

指令

...
function link(scope, element, attrs) {
      scope.some_value  // not correctly linking to some_value within included template 
      }
  return {
    scope: {},
    link: link,
    templateUrl: '/templates/_directive_template.html'
  };
....

当我将 _template_to_be_included.html 的 HTML 直接复制并粘贴到指令模板中时(而不是像上面那样使用 ng-include),一切正常并且 some_value 正确链接到它在形式及其在 Controller 中的位置。

如何正确地将模板包含到指令模板中,并将其变量链接到指令中的对应变量?似乎 ng-include 应该有效,因为它将“获取并编译”指定的模板...

Plunkr: 输入一些输入并点击“更新”

最佳答案

我相信我理解了这个问题。我组装了一个 Plunker。

http://plnkr.co/edit/L4ZN5XhOpex6U5MRKsZ4?p=preview

<div>
  <h1>Directive Template</h1>
  <p>This is just some garbage text.</p>

  <h1>ng-include template</h1>
  <div ng-include="'_template_to_be_included.html'"></div>
</div>

关于javascript - 如何在指令模板中包含模板?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31075714/

相关文章:

javascript - 在reactjs上从父级的onClick更新状态子级

javascript - 如何让 useEffect 监听 localStorage 的任何变化?

c++ - 显式模板实例化的 gcc 问题?

javascript - 将日期转换为 UTC ISO 午夜

javascript - 为什么 javascript 允许 $ 作为函数名称?

javascript - 翻译带有变量的字符串

api - Node.js Provider Rest API 和 angular.js WEB APP

javascript - 在我的情况下,如何将数据从指令发送到父 Controller ?

c++ - 在某个随机命名空间中专门化和定义模板静态成员是否可以?

python - 如何使用 Python 创建 PNG 模板