大佬教程收集整理的这篇文章主要介绍了angularjs – 访问标记中ng-transclude标记的范围,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
<my-directive the-name="'John Doe'"> <my-div name="myDivName"></my-div> </my-directive>
我有两个指令.我想要转换my-directive的内容,并能够从为transcluded元素创建的作用域中访问名为“myDivName”的变量.该变量从“my-directive”指令的隔离范围中的变量“thename”获取其内容.
这是我的Javascript代码:
var app = angular.module('test',[]); app.directive('myDirective',function(){ return { reStrict: 'E',template: '',transclude: true,scope:{ thename: '=' },template: '<div>Hello I am My Directive and this content goes BEFORE the transclude<br><ng-transclude></ng-transclude><p>This element goes after the transclude</p></div>',link: function(scope,element,attrs,ctrl,transcludE){ transclude(function (clone,transcludeScopE) { transcludeScope.myDivName = scope.thename; element.append(clonE);//This line shouldn't be here. I just put it to illustrate that this clone has the right value in the output. }); } } }); app.directive('myDiv',scope: { name: '=' },template: '<div>{{name}}</div>' } });
如您所见,我在“my-directive”指令中使用link函数的transclude参数为转换范围中的变量“myDivName”设置正确的值.但是,该代码只执行AFTER Javascript替换了“my-directive”中标签中的内容,并允许我按照我想要的方式追加转换内容的man克隆(我可以访问它们的范围,所以没有问题).
输出的HTML
<html> <head> </head> <body ng-app="test" class="ng-scope"> <my-directive the-name="'John Doe'" class="ng-isolate-scope"> <div>Hello I am My Directive and this content goes BEFORE the transclude<br> <ng-transclude> <!-- This is the very first time the transcluded element is inserted. I want access to its scope just like I have access to the clone's scope in the transclude function. --> <my-div name="myDivName" class="ng-scope ng-isolate-scope"> <div class="ng-binding"> </div> </my-div> </ng-transclude> <p>This element goes after the transclude</p></div> <!-- This is a clone which scope was correctly modified to set the variable --> <my-div name="myDivName" class="ng-scope ng-isolate-scope"> <div class="ng-binding">John Doe</div></my-div> </my-directive> </body> </html>
问题是第一次在“my-directive”中的标签中插入了内容.如何访问第一个转录克隆的范围?
这样做有一个“简单的方法”,就是要公开“my-directive”的孤立范围的变量,就像这篇文章建议ngModel needs $parent when within Transcluded html,但我不想挤满“my-directive”的父范围有这些变数.
相反,使用transclude函数,并自己插入克隆:
template: '<div>Hello I am My Directive and this content goes BEFORE the transclude<br><insert-here></insert-here><p>This element goes after the transclude</p></div>',transcludE){ transclude(function (clone,transcludeScopE) { transcludeScope.myDivName = scope.thename; var e = element.find('insert-here'); e.append(clonE); });
如果你真的想要ngTransclude
或者,如果您真的想在模板中使用NgTransclude,那么以下内容应该有效:
template: '<div>Hello I am My Directive and this content goes BEFORE the transclude<br><ng-transclude></ng-transclude><p>This element goes after the transclude</p></div>',transcludE){ var e = element.find('ng-transclude'); transcludeScope = e.scope(); transcludeScope.myDivName = scope.thename; });
以上是大佬教程为你收集整理的angularjs – 访问标记中ng-transclude标记的范围全部内容,希望文章能够帮你解决angularjs – 访问标记中ng-transclude标记的范围所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。