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

【问题标题】：Custom directive inside custom directive doesn't fire自定义指令中的自定义指令不会触发
【发布时间】：2023-04-04 19:05:01
【问题描述】：

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

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

知道为什么这对根 html 文件有效，但在另一个指令中无效？

这里是笨蛋。

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

【问题讨论】：

标签： angularjs angularjs-directive

【解决方案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
        }
    }
});

【讨论】：

谢谢@Clark，但服务的使用有点不清楚，你能编辑 plunker 并告诉我吗？这里的想法是在页面加载时拥有一个包含所有内容的 JSON，包括模板的 url 和每个图块将使用的所有数据，所以如果我开始将数据传递给服务以便其他指令可以捕获它，它可能似乎有点不切实际，而且会扩展性。
你说得对，这个解决方案不能重复使用......让我考虑一下。