Question

我正在尝试完成以下方案：

我有以下指令：

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函数覆盖它。

但是，似乎angular不会将动态添加的内容视为已转换内容的一部分。所以当我做以下事情时：

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

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

添加动态转换内容

0 个答案: