angularjs - カスタム ディレクティブ内のカスタム ディレクティブが起動しない

Question

データに応じてテンプレートをロードするディレクティブがありますが、テンプレートをロードしたときにたまたま別のディレクティブが含まれていると、単にレンダリングされません。

pririty、transclude、replace、およびその他の可能なスイッチを試しましたが、成功しませんでした。

これがルートhtmlファイルでは機能するのに、別のディレクティブ内では機能しない理由は何ですか?

こちらがプランカーです。

http://plnkr.co/edit/ORF5zXJGFb3Z9Kb0mNyK?p=preview

Answer 1

これが機能しない理由は、タイル ディレクティブが分離スコープを作成するためです。つまり、親スコープ変数はタイル ディレクティブの子にアクセスできません。「basicAreaChart」変数は MainCtrl で定義されているため、テンプレート tile2.html にはアクセスできません。

これを修正する方法については、さまざまな方法で実行できます。最も簡単な方法は、チャートをサービスに構築するために必要なデータを抽象化することです。

app.factory('ChartData', function(){
    return {
        get : function(id){
            return //Your data based on logic
        }
    }
});

app.directive('chart', function(ChartData){
    return {
        //Configuration properties
        scope : {
            chartDataKey : '@'
        },
        link : function(scope, element, attrs){
            var data = ChartData.get(scope.chartDataKey);
            //More logic
        }
    }
});