Question

我正在使用指令在页面上注入一些特定内容。当url属性指向html文件且该文件的内容需要在我的页面上呈现时，我们有一个要求。我该怎么办

<section>
<block-with-html 
url = "locatiion of html file">
</block-with-html>
</section>

angular
.module('app.blockWithHtml', [])
.directive('blockWithHtml', BlockWithHtmlDirective);

 function BlockWithHtmlDirective(ConfigBlocksService) {
   return {
     restrict: 'E',
     scope: {
       url: '='
     },
     template: `
       <section  >
         <h4>block with html</h4>
         <div>content form the html file goes here</div>
       </section>
     `,
   }
 }

Answer 1

如果要传递非表达式的字段，请尝试以下操作：

   <section>
       <block-with-html 
          type='image'
          url = "locataion of html file">
          </block-with-html>
    </section>

    angular
    .module('app.blockWithHtml', [])
    .directive('blockWithHtml', BlockWithHtmlDirective);

     function BlockWithHtmlDirective(ConfigBlocksService) {

    return {
        restrict: 'E',
        template: function(tElement,tAttr){
           //Use the tAttr.url 
          var imageTemplate   = '<img src="tAttr.url">';
          var dynamicTemplate = '<ng-include src=”getTemplateUrl(tAttr.url)”/>';

        return tAttr.type == 'image' ? imageTemplate : dynamicTemplate;
        }
        controller: function($scope) {
           $scope.getTemplateUrl = function(url) {
           //Some logic here..
        }
    }
    };

如果您要求根据传递的表达式“即时”设置指令的源模板-不可能。原因是指令模板是在编译阶段上设置的-这是angularjs在“打开”所有指令模板并将其放在dom 上的地方，但作用域是尚未创建，这将发生在链接阶段，在该阶段，angularjs会遍历每个指令的模板并为其创建作用域并绑定所有事件。 作为摘要，您不能基于表达式传递模板位置。

在angularjs中添加外部HTML模板

1 个答案: