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

Question

我有一个根据数据加载模板的指令，现在当我加载一个模板并且它恰好有另一个指令时，它根本不会呈现。

我尝试了 pririty、transclude、replace 和任何其他可能的切换，但没有成功。

知道为什么这适用于根 html 文件而不是在另一个指令中吗？

这是笨蛋。

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

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