转换块

Question

我想在transclude块中访问绑定，这里有一个小例子：

<datagetter>
  <dataviewer data="$ctrl.data"></dataviewer>
</datagetter>

datagetter组件通过服务获取一些数据并将其存储在本地变量中，例如： this.data（tempalte中的$ ctrl.data） - 现在我想在transclide块＆＃34; dataviewer＆＃34;中设置的组件中访问此数据。

为了解决这个问题，我阅读了这篇文章，他们接近我的问题：

Passing a binding to transcluded scope in component

AngularJS - access directive scope from transclude scope

我知道我可以使用require来获取子组件中的parentconroller，但这不是一个选项，因为我想保持通用，例如它可能是另一个＆＃34; dataviewer＆＃34;它从＆＃34; datagetter＆＃34;中获取相同的数据，也应该用于＆＃34; dataviwer＆＃34;从另一个datagetter获取数据。

是否有适合我需求的解决方案？任何帮助表示赞赏

Answer 1

您需要进行手动转换，这是我在类似情况下所做的。 Anglers默认转换不起作用，因为它创造了一个新的范围。

<datagetter>
  <dataviewer data="$ctrl.data"></dataviewer>
</datagetter>

/ ** *父组件 * /

angular.module("app").component("datagetter", function() {
    constructor() {
        return {
            restrict: 'E',
            replace: true,
            template: "<div transclude-extended></div>",
            transclude: true,
            bindToController: true,
            controller: function () {
                var ctrl = this;
                    ctrl.data = 'This is sample data.';
            }
        };
    }
});

/ ** *转换扩展指令 * /

angular.module("app").directive("transcludeExtended", function(){
    constructor() {
        return {
            link: function ($scope, $element, $attrs, controller, $transclude) {
                var innerScope = $scope.$new();
                $transclude(innerScope, function (clone) {
                    $element.empty();
                    $element.append(clone);
                    $element.on('$destroy', function () {
                        innerScope.$destroy();
                    });
                });
            }
        }
    };
});

transcludeExtended 是进行翻译的手动方式，而不是 ng-transclude

参考：https://github.com/angular/angular.js/issues/1809