自定义指令中的自定义指令不会触发

Question

我有一个指令，该指令根据数据加载模板，现在当我加载模板时，它恰好在其中包含另一个指令，只是不呈现。

我尝试了优先级，覆盖，替换以及任何其他可能的切换，但均未成功。

任何想法为什么这可以在根html文件上工作，而在另一个指令中却不能工作？

这是矮人。

http://plnkr.co/edit/ORF5zXJGFb3Z9Kb0mNyK?p=预览

Answer 1

它不起作用的原因是因为tile指令创建了一个隔离范围，这意味着tile指令的子代将无法访问任何父范围变量。 由于'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
        }
    }
});