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

时间:2016-08-09 23:23:46

标签: angularjs angularjs-directive angularjs-scope angularjs-components

我想在转换到该组件的内容范围内看到我的组件控制器的一些选定属性。我试图按照Tero Parviainen的角度1.4的例子来做到这一点:http://jsbin.com/pibuqa/1/edit?html,css,js,output(来自http://teropa.info/blog/2015/06/09/transclusion.html)。

虽然我在角1.5.8中没有任何运气。据我所知,我在transclude clone attach函数中对$ 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。)

1 个答案:

答案 0 :(得分: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