Angularjs 添加动态转包内容

我正在尝试完成以下场景：

我有以下指令：

return {
   restrict: "AE",
   replace: true,
   transclude: true,
   scope: {
       chartData: "=",
       groupId: "@", 
       groupName: "@"
    },
    template: "<div class=\"flex\" ng-transclude></div>",
    compile: function(){
          var charts = [];

        return function (scope, element, attributes, controller, transcludeFn) {
            _.forEach(scope.chartData, function (data) {
                var id = "gauge-" + scope.groupId + '-' + data.name;

                scope[id] = data.value; // gauge directive can now access this value
                element.append("<div class=\"flex-spacer flex-column\"><div bv-gauge chart-title=\"" + data.name + "\" data-value=\"" + scope[id] + "\" series-name=\"" + scope.groupName + "\"></div></div>");

                charts.push(id);
            });

            $compile(element.contents())(scope);

            scope.$watch("chartData", function (newVal) {
                _.forEach(scope.chartData, function (data) {
                    var id = "gauge-" + scope.groupName + '-' + data.name;

                    scope.$broadcast("chart:update", newVal);
                });
            });
        }

    }
 };

---

有没有办法将转包内容的范围与父指令相关联？

可以动态添加/删除仪表吗？如果是的话，您可能需要看看ng repeat是如何实现的。我认为使用ng repeat可以静态地设置翻译内容。

transcludeFn(scope, function(clone, scope){
 // clone doesn't have the content we added earlier
});