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

  • 相关阅读:
    Python 循环语句
    Python if、elif 、else语句 与 布尔运算
    Python 运算符
    Python 标识符
    Python 常用数据类型(整数,浮点数,复数,布尔型)
    Python 编辑器内容
    Python 语言介绍
    vscode 最新中文设置
    漫画数据库_基础和设计数据库
    linux配置服务器
  • 原文地址:https://www.cnblogs.com/guofan/p/8360246.html
Copyright © 2011-2022 走看看