何时使用transclude'true'并在Angular中转换'element'？
Lau*_*Skr 175 angularjs angularjs-directive angularjs-ng-transclude
我何时应该使用transclude: 'true'何时transclude: 'element'？我无法transclude: 'element'在角度文档中找到任何相关信息,它们非常令人困惑.
如果有人能用简单的语言解释,我会很高兴.每个选项的好处是什么？它们之间真正的区别是什么？
这是我发现的:
Run Code Online (Sandbox Code Playgroud)transclude: true在编译函数中,您可以在transclude链接函数的帮助下操作DOM,或者您可以使用任何HTML标记上的ngTransclude指令将已转换的DOM插入到模板中.
和
Run Code Online (Sandbox Code Playgroud)transclude: ‘element’这将转换整个元素,并在compile函数中引入了transclude链接函数.您无法访问此范围,因为尚未创建范围.编译函数为有权访问范围的指令创建链接函数,transcludeFn允许您触摸克隆元素(已被转换)以进行DOM操作或使用绑定到范围内的数据.为了您的信息,这用于ng-repeat和ng-switch.
sir*_*rhc 228
transclude- 编译元素的内容并使其可用于指令.通常与ngTransclude一起使用.翻译的优点是链接功能接收预先绑定到正确范围的翻译功能.在典型的设置中,窗口小部件创建隔离范围,但是转换不是子项,而是隔离范围的兄弟.这使得窗口小部件可以具有私有状态,并且将转换绑定到父(预隔离)范围.
true- 转换指令的内容.
'element'- 转换整个元素,包括以较低优先级定义的任何指令.
transclude:true
所以假设你有一个my-transclude-true声明的声明transclude: true,看起来像这样:
<div>
<my-transclude-true>
<span>{{ something }}</span>
{{ otherThing }}
</my-transclude-true>
</div>
在编译之后和链接之前,这变为:
<div>
<my-transclude-true>
<!-- transcluded -->
</my-transclude-true>
</div>
该内容(子女)my-transclude-true,其<span>{{ something }}</span> {{...被transcluded和可用的指令.
转录:'元素'
如果你有一个名为my-transclude-element声明的指令,transclude: 'element'它看起来像这样:
<div>
<my-transclude-element>
<span>{{ something }}</span>
{{ otherThing }}
</my-transclude-element>
</div>
在编译之后和链接之前,这变为:
<div>
<!-- transcluded -->
</div>
在这里,整个元素包括其子元素被转换并可用于指令.
链接后会发生什么？
这取决于您的指令,以执行transclude函数所需的操作.ngRepeat使用,transclude: 'element'以便它可以在范围更改时重复整个元素及其子元素.但是,如果你只需要更换标签,并要保留它的内容,你可以使用transclude: true与ngTransclude它会自动执行这项指令.
- 我有点错过了"提供给指令"的陈述.该指令始终可以使用该元素.你能详细说明一下吗？ (3认同)
小智 33
设置为true时,该指令将删除原始内容,但可通过名为ng-transclude的指令将其重新插入模板中.
appModule.directive('directiveName', function() {
return {
template: '<div>Hello there <span ng-transclude></span></div>',
transclude: true
};
});
<div directive-name>world</div>
浏览器渲染:"Hello there world."
- 这根本不回答这个问题(这是关于`transclude:true`和`transclude:element`之间的区别) (23认同)
想想transclusion的最好的办法是一幅图画Frame.A相框拥有自己的设计并加入picture.We可以决定将去它里面有什么画面的空间.
当谈到角度时,我们有一些控制器及其范围,我们将在其中放置一个支持包含的指令.该指令将拥有自己的显示和功能.在非转换指令中,指令内的内容由指令本身决定,但是通过转换,就像图片框架一样,我们可以决定指令内部的内容.
angular.module("app").directive('myFrame', function () {
return {
restrict: 'E',
templateUrl:"frame.html",
controller:function($scope){
$scope.hidden=false;
$scope.close=function(){
$scope.hidden=true;
}
},
transclude:true
}
});
指令内的内容
<div class="well" style="width:350px;" ng-hide="hidden">
<div style="float:right;margin-top:-15px">
<i class="glyphicon glyphicon-remove" ng-click="close()" style="cursor:pointer"></i>
</div>
<div ng-transclude>
/*frame content goes here*/
</div>
</div>
致电指令
<body ng-controller="appController">
<my-frame>
<span>My Frame content</span>
</my-frame>
</body>
| 归档时间： |
|
| 查看次数： |
81672 次 |
| 最近记录： |