使用指令

Question

我试图让该指令标签内HTML到模板文件，并使其在屏幕上

HTML

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

的script.js传递HTML到TemplateURL

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> 

Answer 2

您可以使用指令tranclude功能来实现此功能。

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

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> 

希望这会为你（参考:: https://codepen.io/pankajbadukale/pen/aVbGaM）