Question

我正在使用指令来尝试替换一些经常重复发生的模板代码，我必须用更简单的东西来编写代码。

假设我有以下原始标记：

<!-- 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>

我希望通过这样做来简化它：

<!-- 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>

...如果有几个属性可用于缩短整个块，则该指令目前以这种方式编写：

_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");
    },
  };
});

问题是，如果现有HTML包含任何{{angular template code}}。

，则总会被忽略

如何编写指令以使其仍然符合模板代码？

Answer 1

我成功修复了该指令的问题，但它需要几个步骤。

使用正确的范围属性。我没有使用'='，而是使用了'@'

这是基于以下链接：What is the difference between '@' and '=' in directive scope in AngularJS?

使用@，=和&注意范围隔离的事项会影响您必须在模板中引用变量的方式。例如，使用=表示我会引用变量而不是 brackets，而使用@则会引用变量 with { {1}}。
就像我在第一点中提到的那样，在调整范围属性之后，我需要返回并以正确的方式引用变量，具体取决于范围的定义方式。

{{brackets}}

ng-transclude要求我实际将一个容器放在模板中的某个位置，用于转换内容。这是一个例子：
```
{...transclude: true,...}
```

只有这样，指令才能按预期工作。另外，还有@rob向我提供这个介绍性链接的道具https://egghead.io/lessons/angularjs-components-and-containers。

Angular指令，包含传递的包含模板代码的innerHTML

1 个答案: