Question

这是html部分：

<th class="widget-header">
  <label class="formwidget-fieldlabel">Question Title</label>
</th>

我想做的是制定一个重复使用它的指令。

但是，我不知道如何制作＆＃34;问题标题＆＃34;部分作为论据，似乎以下代码不起作用。

app.directive 'thdatahead', () ->
    restrict: 'E'
        scope:
          title: '='
    template: '<th class="widget-header">' + '<label class="formwidget-fieldlabel">title</label></th>'

Answer 1

您正在寻找的想法称为transclusion，它基本上允许您获取指令所在元素的内部结构，并将其放置在指令内所需的位置。

声明：

restrict: 'E',
transclude: true,

指令中的用法：

<div ng-transclude></div>

因此，在上面的示例中，您需要使用您的指令，我建议将此作为属性使用，因为thdatahead不是表或thead下的有效标记。

<thdatahead class="widget-header">
  <label class="formwidget-fieldlabel">Question Title</label>
</thdatahead>

app.directive 'thdatahead', () ->
    restrict: 'E',
    transclude: true,
    scope: true,
    template: '<th class="widget-header"><div ng-transclude></div></th>'

我听说过有关转换指令的最佳描述来自ng-conf，其中扬声器将其描述为相框。（youtube video，参考@~28分钟，但整件事情都很不错）

Answer 2

如果您尝试传递给指令的唯一内容是变量，则可以将其作为指令的属性传递（在这种情况下不需要进行转换）：

app.directive 'thdatahead', () ->
    restrict: 'E',
    scope: {title: '='},
    template: '<th class="widget-header"><label class="formwidget-fieldlabel">{{title}}</label></th>'

您错过了范围变量的{{ }}绑定。在实例化指令时，可以将title变量传递给指令：

<thdatahead title="scopeVariableForTitle"></thdatahead>

当然你需要一个控制器变量：

$scope.scopeVariableForTitle = 'Question Title'

angularjs如何将参数传递给指令

2 个答案: