Javascript 带有传递的包含模板代码的innerHTML的Angular指令

我正在使用指令来尝试用更简单的东西来替换一些经常重复出现的模板代码

假设我有以下原始标记：

<!-- section with repeating stuff in it -->
<div some-attributes etc="etc" very-long-tag="true">
    <p class="lead">Some description text</p>

    <div class="row section short" ng-repeat="row in things">
      <div class="col-sm-6 col-md-4" ng-repeat="app in row.col">
        <div class="thumbnail">
          <img ng-src="im/things/{{app.image}}" alt="..." class="img-circle" width="250">
          <div class="caption">
            <h3>{{app.name}}</h3>
            <p>{{app.desc}}</p>
          </div>
        </div>
      </div>
    </div>
</div>

一些描述文本
{{app.name}
{{app.desc}}

我想通过这样做来简化它：

<!-- section with repeating stuff in it -->
<xx title="Some description text">
    <!-- this innerHTML gets passed to the directive -->
    <div class="row section short" ng-repeat="row in things">
      <div class="col-sm-6 col-md-4" ng-repeat="app in row.col">
        <div class="thumbnail">
          <img ng-src="im/things/{{app.image}}" alt="..." class="img-circle" width="250">
          <div class="caption">
            <h3>{{app.name}}</h3>
            <p>{{app.desc}}</p>
          </div>
        </div>
      </div>
    </div>
    <!-- end of innerHTML -->
</xx>

{{app.name}
{{app.desc}}

…如果有多个属性可用于缩短整个块，则指令当前的编写方式如下：

_d.directive('xx', function() {
  return {
    scope: {
      'color': '=',
      'option': '=',
      'title': '=',
      'image': '=',
      'image-pos': '=',
      'image-size': '='
    },
    restrict: 'E',
    transclude: false,
    template: function(element, scope) {
      var inside = 'x';
      var content = element[0].innerHTML;
      var title = scope.title;
      var color = scope.color ? 'style="background-color: '+scope.color+'"' : "";
      var title = scope.title ? '<h2 class="centertext marginBottom20">'+scope.title+'</h2>' : '';
      return ['<div class="section row short" '+color+' ng-transclude>',
        title,
        content, //this may contain {{template code}}, but it always gets omitted
        '</div>'
      ].join("\n");
    },
  };
});

指令（'xx'，函数（）{ 返回{ 范围：{ “颜色”：“=”， '选项'：'='， “标题”：“=”， “图像”：“=”， “图像位置”：“=”， “图像大小”：“=” }, 限制：'E'， 排除：错误， 模板：功能（元素、范围）{ 内部变量='x'； var content=元素[0]。innerHTML； var title=scope.title； var color=scope.color？'style=“背景色：'+scope.color+'”：“”； 变量title=scope.title？“”+scope.title+“”； 返回[“”， 标题 content，//这可能包含{{template code}}，但它总是被忽略 '' ].加入（“\n”）； }, }; }); 问题是，如果现有HTML包含任何

{{angular template code}}

，那么它总是被忽略

---

如何编写指令，使其仍然遵守模板代码？

我成功地解决了指令的问题，但它采取了几个步骤

使用正确的作用域属性。我没有使用

'='

，而是使用

'@'

这是基于以下链接：

关于使用

@

、

=

和

&

进行范围隔离需要注意的事项会影响您必须在模板中引用变量的方式。例如，使用

=

意味着我将引用不带括号的变量，而使用

@

将引用带括号的变量

正如我在第一点中提到的，在调整范围属性之后，我需要返回并根据范围的定义以正确的方式引用变量

ng transclude

与

{…transclude:true，…}

一起使用时，需要在模板中的某个位置放置一个容器，用于该转写内容。下面是一个例子：

return ['<div class="section row short" '+color+' ng-transclude>',
  title,
    '<div ng-transclude>', //this is the container for the original innerHTML, transcluded
        content, //this may contain {{template code}}, and gets transcluded
    '</div>
  '</div>'
].join("\n");

return[''，
标题
''，//这是原始innerHTML的容器，已转移
content，//这可能包含{{template code}}，并被转写
'
''
].加入（“\n”）；

---

直到那时，指令才如预期的那样起作用。另外，为了给我提供这个介绍性链接，我成功地解决了指令的问题，但它采取了几个步骤

使用正确的作用域属性。我没有使用

'='

，而是使用

'@'

这是基于以下链接：

关于使用

@

、

=

和

&

进行范围隔离需要注意的事项会影响您必须在模板中引用变量的方式。例如，使用

=

意味着我将引用不带括号的变量，而使用

@

将引用带括号的变量

正如我在第一点中提到的，在调整范围属性之后，我需要返回并根据范围的定义以正确的方式引用变量

ng transclude

与

{…transclude:true，…}

一起使用时，需要在模板中的某个位置放置一个容器，用于该转写内容。下面是一个例子：

return ['<div class="section row short" '+color+' ng-transclude>',
  title,
    '<div ng-transclude>', //this is the container for the original innerHTML, transcluded
        content, //this may contain {{template code}}, and gets transcluded
    '</div>
  '</div>'
].join("\n");

return[''，
标题
''，//这是原始innerHTML的容器，已转移
content，//这可能包含{{template code}}，并被转写
'
''
].加入（“\n”）；

---

直到那时，指令才如预期的那样起作用。另外，为我提供这一介绍性链接，还有一些建议。

您不使用transclude的原因吗？还有什么原因让你用JS字符串来构建HTML，而不是用角度绑定的静态HTML？是的，是的。transclude已经被使用过，也没有被使用过，它并没有达到我预期的效果，所以我想具有transclude专业知识的人会回答这个问题。js字符串而不是角度绑定：我这样做只是为了在模板代码之外编写条件。但是，在angular的上下文中，我不确定您是指使用

ngbind

的绑定，还是指我应该使用

{{bindings}

的绑定。你能给我举个例子说明你在这里会做什么吗。。。作为回答？请看一看eggheadIO关于组件和容器的视频：John的容器示例似乎可以满足您的需要。感谢视频，这正好是我开始提出正确问题所需的足够信息。您为什么不使用transclude？还有什么原因让你用JS字符串来构建HTML，而不是用角度绑定的静态HTML？是的，是的。transclude已经被使用过，也没有被使用过，它并没有达到我预期的效果，所以我想具有transclude专业知识的人会回答这个问题。js字符串而不是角度绑定：我这样做只是为了在模板代码之外编写条件。但是，在angular的上下文中，我不确定您是指使用

ngbind

中的绑定，还是指我应该使用

{{bindings}

的绑定