transclude 属性,跟指令的 transclude 属性类似。
在组件中嵌入指定的 dom 内容,以及使用这种方式来重复DOM元素。默认 false 不嵌入。
如果想嵌入指定内容,则设置其值为 true 后,配合 ng-transclude 指令使用。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>transclude 属性探究</title> <script src="angular.js"></script> </head> <body> <box> <part></part> </box> <script> angular.module('app', []) .component('box', { transclude: true, template: ` <h3>box component</h3> <div ng-transclude></div> <h3>box component</h3> <div ng-transclude> `, controller: function () {} }) .component('part', { template: "<h3>part component</h3>", controller: function () {} }) document.addEventListener('DOMContentLoaded', function () { angular.bootstrap(document, ['app']); }); </script> </body> </html>
比如,我在调用父组件 box 的元素标签中,嵌入了子组件 part 元素标签,配合父组件的 template 中 ng-transclude 指令使用,就会将 part 替换到 ng-transclude 的相应位置。