0

基礎となるデータベースのさまざまなメトリックを公開するウィジェットをユーザーが追加できるように、ダッシュボード コンポーネントを構築しています。各ウィジェットは個別のディレクティブです。ダッシュボードでウィジェットのサイズを適切に設定するには、ディレクティブのテンプレートで定義されたプロパティにアクセスする必要がありますが、その方法を見つけるのに苦労しています。

ディレクティブをコンパイルしてウィジェットを追加しています。

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

これは、ダッシュボード コンテナーに .appended されます。

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 に答える