[angular]指令之3transclude

雨点打透心脏的1/2处 2022-07-13 02:45 154阅读 0赞

<!DOCTYPE html>
    <html lang="en" ng-app="testDirectiveTransclude">
    <head>
        <meta charset="UTF-8">
        <title>测试Directive的transclude</title>
        <script src="../frameWork/angular.js"></script>
        <script src="testDirectiveTransclude.js"></script>
    </head>
    <body>
    <h3>内容1:transclude的值是默认(false)</h3>
    <transclude-def>
        <span>我是标签中的内容</span>
    </transclude-def>
    
    <h3>内容2:transclude的值是true,有个span作为插入内容</h3>
    <transclude-true>
        <span>我是标签中的内容</span>
    </transclude-true>
    
    <h3>内容3:transclude的值是true，但没有插入内容</h3>
    <transclude-true></transclude-true>
    
    <h3>内容4:transclude的值是obj，但没有插入内容</h3>
    <transclude-multi-slot-point></transclude-multi-slot-point>
    
    <h3>内容5:transclude的值是obj，有插入内容;</h3>
    <transclude-multi-slot-point>
        我是不用指定插入点名称的内容部分
        <multi-slot-point-tile>我是自定义的标题</multi-slot-point-tile>
        <multi-slot-point-content>我是自定义的内容</multi-slot-point-content>
        <multi-slot-point-footer>我是自定义的页脚</multi-slot-point-footer>
    </transclude-multi-slot-point>
    
    </body>
    </html>

/**
     * 由于directive在angular中的地位之重，所以得认真对待。但理解难啊，所以决定逐个属性进行实例分析
     * directive实例分析第三篇：transclude
     * Created by liyanq on 16/12/21.
     */
    
    /**这个属性含义重大，配合angular自带的指令ng-transclude使用，变换莫测。
     * 1，replace的取值和scope一样，可以为bool值，也可以是obj。默认为false
     * 2，replace为true或obj，意思就是允许插入点操作，配合指令ng-transclude；如果不允许的话，模版里面不能有ng-transclude指令存在，否则有错。
     * 3，指令中的插入点所插入的内容，就是html标签中的内容。如内容2中的<span>。
     * 4，如果没有插入点内容的话，插入点标签中的标签不被替换。如内容3。
     * 5，ng-transclude的内置指令可以是EAC的形式，可以指定插入点名称，需要配合指令的transclude使用，也就是对象形式。
     * 6，指定多点插入的时候，如果不加?修饰就必须得有内容，否则抱错：Required transclusion slot `title` was not filled.
     * 7，指定多点插入的时候，还有个默认的内容，和为true的时候一样。如内容5
     * */
    
    var app = angular.module("testDirectiveTransclude", []);
    
    app.directive("transcludeDef", function () {
        var dir = [];
        dir.replace = true;//看的容易
        dir.restrict = "E";
        dir.transclude = false;//默认值
        dir.template = "<div>" +
            "<div>我是模版中的内容</div>" +
            // "<div ng-transclude>我是模版中的插入点</div>" +//不可以这样写，虽然效果一样，但控制台有错误。
            "<div>我是模版中的插入点</div>" +
            "</div>";
        return dir;
    }).directive("transcludeTrue", function () {
        var dir = [];
        dir.replace = true;//看的容易
        dir.restrict = "E";
        dir.transclude = true;
        dir.template = "<div>" +
            "<div>我是模版中的内容</div>" +
            "<div ng-transclude>我是模版中的插入点</div>" +
            "<ng-transclude>我是模版中的插入点</ng-transclude>" +
            "</div>";
        return dir;
    }).directive("transcludeMultiSlotPoint", function () {
        var dir = [];
        dir.replace = true;//看的容易
        dir.restrict = "E";
        dir.transclude = {
            title: "?multiSlotPointTile",
            content: "?multiSlotPointContent",
            footer: "?multiSlotPointFooter"
        };
        dir.template = "<div>" +
            "<div>我是模版中的内容</div>" +
            "<div ng-transclude='title'>我是模版中的插入点的标题</div>" +
            "<div ng-transclude='content'>我是模版中的插入点的内容</div>" +
            "<div class='ng-transclude:footer'>我是模版中的插入点页脚</div>" +
            "<div ng-transclude>我是模版中的默认插入点的内容</div>" +
            "</div>";
        return dir;
    });

参考：https://segmentfault.com/a/1190000004586636