使用指令将 HTML 传递到 TemplateURL

Question

我正在尝试将指令标记内的 HTML 放入模板文件中并将其呈现在屏幕上

HTML

<insert-test-tab><b>Put this text in the template test.html</b></insert-test-tab>

script.js

directive('insertTestTab', function() {
  return {
    replace: true,
    link: function (scope, element, attr) {

    },
    templateUrl: function (elem, attr) {
      return 'test.html'
    },
  }
}

test.html

<div>
  <p>bla bla bla</p>
  <p>[[I want to get that HTML inside <insert-test-tab> here]]</p>
</div>

期望的输出

<div>
  <p>bla bla bla</p>
  <b>Put this text in the template test.html</b>
</div>

谢谢。

Answer 1

您可以使用指令转录功能实现此目的。

所以你的指令定义应该如下：

directive('insertTestTab', function() {   return {
    replace: true,
    transclude: true,
    link: function (scope, element, attr) {

        }, templateUrl: function (elem, attr) {
          return 'test.html'
        },   
    } 
}

并且test.html应该::

<div>
  <p>bla bla bla</p>
  <p><ng-transclude></ng-transclude></p>
</div>

希望这对你有用（Ref:: https://codepen.io/pankajbadukale/pen/aVbGaM）

Answer 2

指令定义：

  directive('insertTestTab', function() {   
    return {
   replace: true,
   transclude: true,
   link: function (scope, element, attr) {

    }, templateUrl: function (elem, attr) {
      return 'test.html'
    },   
 } 
}

test.html:

<div>
  <p>bla bla bla</p>
  <p><ng-transclude></ng-transclude></p>
</div>

使用指令将 HTML 传递到 TemplateURL

Passing HTML into TemplateURL using directive

angularjs

angularjs-directive