[angular]指令之3transclude

最新推荐文章于 2021-03-03 21:36:35 发布

灵眼儿上方

最新推荐文章于 2021-03-03 21:36:35 发布

阅读量993

点赞数

CC 4.0 BY-SA版权

分类专栏： java相关文章标签： angular 指令插入点

本文链接：https://blog.youkuaiyun.com/liyanq528/article/details/53782279

java相关专栏收录该内容

25 篇文章

订阅专栏

本文深入探讨AngularJS中指令的transclude属性，通过多个示例解析其工作原理及应用场景，包括不同取值下的表现与多插入点的使用。

<!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