AngularJSディレクティブ - アトリビュート値をスコーププロパティにリンクする

Question

私はアプリケーションでチャート作成にangle-nvd3を使用しています。私は、カスタムディレクティブを作成して、ディレクティブからオプションを渡し、コントローラにディレクティブを設定しました。

ビュー：

<nvd3-bar-chart></nvd3-bar-chart> 

指令

angular.module('app.graphs') 
    .directive('nvd3BarChart', 
     function() { 
      return { 
       restrict: 'E', 
       replace: true, 
       template: '<nvd3 options="nvd3_options" data="bar_data" api="api"></nvd3>', 
       link: function(scope) { 
        scope.nvd3_options = { 
         chart: { 
          type: 'discreteBarChart',.... 

bar_dataプロパティは、コントローラに設定されており、チャートが正常に動作します。しかし、コントローラー内のさまざまなデータプロパティにバインドするためにディレクティブを再利用したいと思います。

このようなものです。基本的に分離株スコープなしディレクティブ内のテンプレートに

//Temperature data would be set in controller 
<nvd3-bar-chart data="temperature_data"></nvd3-bar-chart> 

//Precipitation data would be set in controller 
<nvd3-bar-chart data="precipitation_data"></nvd3-bar-chart> 

おかげ

Answer 1

私が使用してこれを解決終わっ指定することで、カスタムディレクティブに直接属性があります

angularがディレクティブマークアップをテンプレートマークアップに置き換えると、置き換えられたhtml行に属性が追加されます。

Answer 2

scope: { 
dataParam: '@' 
}, 
template: '<nvd3 options="nvd3_options" data="{{dataParam}}" api="api"></nvd3>', 

をカスタムディレクティブのデータ属性をリンク：

template: '<nvd3 options="nvd3_options" data="{{dataParam}}" api="api"></nvd3>', 
link: function (scope, element, attr) { 
    scope.dataParam = attr.dataParam; 
}