0

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

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

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);

我需要设置“w”和“h”的值，并将这些属性嵌入到小部件的指令模板中：

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

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

在上面的示例中，我可以很容易地访问“test”属性，但不能访问“my-rows”或“my-cols”。

4

2 回答 2

0

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

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看到

于 2015-04-19T18:23:24.667 回答
0

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

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

定义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看到一个例子

但是，从$compile的文档中可以看出，replace: true它已被弃用，并将在 v2.0 中删除。但是，我怀疑很多东西不会向后兼容，如果/当您想迁移到 v2.0 时，这可能是您最不关心的问题

于 2015-04-19T18:13:34.343 回答