zoukankan      html  css  js  c++  java
  • angular1.5 组件学习 -- 4.2、组件的其他属性 transclude

    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 的相应位置。

  • 相关阅读:
    [JZOJ3386] 守卫者的挑战
    [JZOJ3385] 黑魔法师之门
    [JZOJ3383] 太鼓达人
    [JZOJ3382] 七夕祭
    NOIP模拟测试on 2019.9.27
    数据结构测试2 on 2019.9.25
    数据结构测试1 on 2019.9.24
    P2047 [NOI2007]社交网络
    P2286 [HNOI2004]宠物收养场
    P1342 请柬 建反图+dijkstra
  • 原文地址:https://www.cnblogs.com/guofan/p/8360246.html
Copyright © 2011-2022 走看看