0

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

我有以下指令：

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

    }
 };

如您所见，我正在向指令的元素动态添加一些内容。它工作得很好，但有一个问题；内部指令的隔离范围（即 bv-gauge）只能看到外部范围，而不是 bv-gauge-parent 的范围；据我所知，这是默认行为，我们可以使用 transclude 函数覆盖它。

但是，角度似乎没有将动态添加的内容视为嵌入内容的一部分。因此，当我执行以下操作时：

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

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

4

0 回答 0