Angularjs 已编译指令的访问属性

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

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

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

divWidget=$compile（“”）（$scope）；

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

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

divContainer=$（“”）；
追加（divWidget）；
$（元素）.append（divContainer）；

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

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

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

---

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

您可以在指令定义中设置

replace:true

，然后，指令模板根元素上的所有属性+类与父模板中原始元素上的属性+类合并在一起。所以如果你有

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

那么编译后的DOM看起来像

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

小部件的内容 您可以使用与父模板中相同的方式访问该指令添加的属性。你可以在网站上看到一个例子

---

但是从中可以看出，

replace:true

已被弃用，并将在v2.0中删除。但是，我怀疑有太多东西是不向后兼容的，如果/当您想迁移到v2.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);
    }
  };
});

app.directive（'myWidget'，function（）{
返回{
限制：'E'，
模板：“小部件的内容”，
链接：函数（范围、元素、属性）{
var myRows=element.children（）.attr（'my-rows'）；
属性$set（'myRows'，myRows）；
var myCols=element.children（）.attr（'my-cols'）；
属性$set（'myCols'，myCols）；
}
};
});

可以在

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