Question

我正在构建一个仪表板组件，以允许用户添加公开底层数据库的各种指标的小部件。每个小部件都是一个独特的指令为了在仪表板中正确调整窗口小部件的大小，我需要访问指令模板中定义的属性，但很难找到一种方法。

我通过编译其指令来添加小部件：

divWidget = $compile("<" + widgetName + " test='3'></" + widgetName + ">")($scope);

然后将其添加到仪表板容器中：

divContainer = $("<div class='cell' style='width:" + w + "px;height:" + h + "px'></div>");
divContainer.append(divWidget);
$(element).append(divContainer);

我需要设置＆＃34; w＆＃34;的值。和＆＃34; h＆＃34;，并且我将这些属性嵌入到小部件的指令模板中：

<div class="widget" my-rows="1" my-cols="3">

问题是，一旦编译了指令，我如何访问my-rows和my-cols？我知道我可以为每个小部件定义一个服务来从外部访问小部件的配置，但这似乎是一个巨大的开销。

在上面的示例中，我可以访问＆＃34; test＆＃34;属性很容易，但不是＆＃34; my-rows＆＃34;或者＆＃34; my-cols＆＃34;。

Answer 1

您可以在指令定义中设置replace: true，然后指令模板的根元素上的所有属性+类与父模板中原始元素上的那些属性合并在一起。所以，如果你有

<my-widget test="3"></my-widget>

包含<{p}}的myWidget定义

replace: true,
template: '<div class="widget" my-rows="1" my-cols="3">Contents of widget</div>',

然后编译的DOM看起来像

<div class="widget" my-rows="1" my-cols="3" test="3">Contents of widget</div>

您可以使用与父模板中的属性相同的方式访问指令添加的属性。您可以在http://plnkr.co/edit/wIXlYIaNfdd0KNZG7vke

查看此示例

然而在docs for $compile中可以看到，replace: true已被弃用，并将在v2.0中删除。但是，我怀疑很多事情都不会向后兼容，如果您想要迁移到v2.0，这可能是您最不关心的问题

Answer 2

该指令可以直接访问其模板，然后在父元素上设置属性：

app.directive('myWidget', function() {
  return {
    restrict: 'E',
    template: '<div class="widget" my-rows="1" my-cols="3">Contents of widget</div>',
    link: function(scope, element, attrs) {
      var myRows = element.children().attr('my-rows');
      attrs.$set('myRows', myRows);
      var myCols = element.children().attr('my-cols');
      attrs.$set('myCols', myCols);
    }
  };
});

可以在http://plnkr.co/edit/1qiHvc1Teq2BeiO1ZSsm?p=preview

看到

访问已编译指令的属性

2 个答案: