在 Angular 1.5.8 中使用 transclude clone attach 函数添加可访问的 transcluded 内容的数据？

Question

我想让我的组件控制器的一些选定属性在包含到该组件的内容范围内可见。我正在尝试按照 Tero Parviainen 的 angular 1.4 示例执行此操作：http://jsbin.com/pibuqa/1/edit?html,css,js,output (from http://teropa.info/blog/2015/06/09/transclusion.html).

虽然我在 angular 1.5.8 中运气不佳。据我所知，我在 transclude 克隆附加函数中对 $scope 所做的更改没有效果：http://plnkr.co/edit/Mr69lBZJswaM6MSyWwTP?p=preview

我的目标：

<my-component> <div>{{something}} will be set to "blah"</div> <my-component>

component('myComponent', { transclude: true, template: '<div ng-transclude></div>', controller: function ($transclude) { $transclude(function (transEl, transScope) { transScope.something = "blah"; } }})

编辑：我认为我需要自己插入嵌入的文本，而不是在执行此类操作时依赖 ng-transclude。（ng-transclude 自己包含了内容。我的克隆附加函数是运行并且没有做任何有效的事情，因为它没有操纵 dom。）

Answer 1

您看到的问题源于您在模板中使用 ng-transclude，然后在控制器中调用 $transclude。内容已绑定到模板，某些内容属性已设置在不同的范围内。您需要从模板中删除 ng-transclude 并将内容附加到您的 cloneLinkingFn:

$transclude(function (transEl, transScope) {
        // Set something property
        transScope.something = "something else";
        // Now append transcluded element to your element
        $element.append(transEl);
    });

这是更新后的 plnkr：http://plnkr.co/edit/4WWmyPcYuGmGh4dPGNmi?p=preview

在 Angular 1.5.8 中使用 transclude clone attach 函数添加可访问的 transcluded 内容的数据？

Using the transclude clone attach function to add data accessible to transcluded content in Angular 1.5.8?

angularjs

angularjs-directive

angularjs-scope

angularjs-components