Angularjs   发布时间:2022-04-20  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了AngularJS:指令控制器中的$transclude local和链接函数中的transclude参数之间有区别吗?大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我实现了一个指令,将子内容的多个片段转换为模板.它的工作原理,但似乎比我见过的大多数例子都简单,并提出了一些关于如何进行翻译的问题.

这是指令:

@H_194_3@module.directive('myTransclude',function() { return { reStrict: 'A',transclude: true,replace: true,scope: true,template: '<div style="border: 1px solid {{Color}}"><div class="my-transclude-title"></div><div class="my-transclude-body"></div></div>',link: function(scope,element,attrs,controller,transcludE) { // just to check transcluded scope scope.color = "red"; transclude(scope,function(clone,scopE) { Array.prototype.forEach.call(clone,function(nodE) { if (! node.tagName) { return; } // look for a placeholder node in the template that matches the tag in the multi-transcluded content var placeholder = element[0].querySELEctor('.' + node.tagName.toLowerCase()); if (! placeholder) { return; } // insert the transcluded content placeholder.appendChild(nodE); }); }); } } });

这是示例用法

<div ng-controller="AppController">
    <div my-transclude>
        <my-transclude-title> <strong ng-bind="title"></strong>

        </my-transclude-title>
        <my-transclude-body>My name is {{name}} and I've been transcluded!</my-transclude-body>
    </div>
</div>

您可以在this fiddle中看到它的运行情况.

请注意以下几点:

>它通过元素类将片段与模板占位符匹配,而不是显式定义的子指令.有什么理由这样或那样做吗?
>与我见过的许多例子不同,它没有明确地在子片段上使用$compile服务.似乎Angular在翻译后编译片段,至少在这个简单的情况下.这总是正确的吗?
>它使用链接函数的(几乎没有记录的)transclude参数,而不是将$transclude local注入到controller指令中的其他(几乎没有文档记录)方法.在听到如此多的告诫不操纵控制器中的DOM之后,控制器方法看起来像是一个奇怪的构造,在链接函数中处理这种情况感觉更自然.但是,我尝试了这种方式,它似乎也一样.这两者有什么区别吗?

谢谢.

编辑:为了部分回答问题#2,我发现你确实需要显式编译未应用指令的模板克隆的被转换内容.请参阅此处的行为差异:http://jsfiddle.net/4tSqr/3/

要回答关于指令控制器中的$transclude函数链接函数之间差异的问题,首先我们需要了解$transclude函数可以通过指令编译,控制器和链接函数来访问.

更新:根据1.4 Angular文档,编译(transcludE)已被弃用!因此,只能在指令Controller或Linking函数中访问transclude函数. (参见detail explanation的官方文档)

在编译阶段使用$transclude与在控制器和链接阶段使用$transclude有很大的不同,因为在编译阶段,你没有访问$scope与在控制器和链接函数中使用$scope(控制器)和范围(链接)是可访问的.话如此,在指令控制器与链接中使用$transclude的唯一区别是执行顺序.对于多个嵌套指令,在链接阶段使用$transclude而不是在控制器中使用它是相对安全的.

订单如下:

> parentDirectiveCompile – > childDirectiveCompile(指令编译)
> parentDirectiveControllerPre,parentDirectiveControllerPost – > childDirectiveControllerPre,childDirectiveControllerPost(指令控制器)
> childLinkFunction – > parentLinkFunction

请注意childLinkFunction如何在parentLinkFunction之前首先执行? (执行顺序)

有用的资源:

> Angular directives – when and how to use compile,pre-link and post-link

希望这个答案对你有所帮助!

大佬总结

以上是大佬教程为你收集整理的AngularJS:指令控制器中的$transclude local和链接函数中的transclude参数之间有区别吗?全部内容,希望文章能够帮你解决AngularJS:指令控制器中的$transclude local和链接函数中的transclude参数之间有区别吗?所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。