[angular]指令之2replace

最新推荐文章于 2020-12-22 19:32:50 发布

灵眼儿上方

最新推荐文章于 2020-12-22 19:32:50 发布

阅读量2.1k

点赞数

分类专栏： java相关文章标签： angular 指令 replace

本文链接：https://blog.csdn.net/liyanq528/article/details/53780554

版权

java相关专栏收录该内容

25 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en" ng-app="testDirectiveReplaceTest">
<head>
    <meta charset="UTF-8">
    <title>测试Directive的Scope</title>
    <script src="../frameWork/angular.js"></script>
    <!--这个不清楚原因，同一文件夹下非得写绝对路径-->
    <script src="../testDirective/testDirectiveReplace.js"></script>
</head>
<body>
<h3>directive的replace默认(false),在浏览器中的标签没有被替换,div的外层有replace-def标签</h3>
<replace-def>
    <span>我是指令中的标签</span>
</replace-def>

<h3>directive的replace为true,在浏览器中的replace-true层标签被替换了,直接是div...</h3>
<replace-true>
    <span>我是指令中的标签</span>
</replace-true>
</body>
</html>

/**
 * 由于directive在angular中的地位之重，所以得认真对待。但理解难啊，所以决定逐个属性进行实例分析
 * directive实例分析第二篇：replace
 * Created by liyanq on 16/12/21.
 */


/**replace在directive中的地位、功能、和复杂程度都是最简单的，其实不该单独写出来，写它为了凑数吧。
 * 1，replace是bool类型的值，默认为false。
 * 2，replace意思是，指令的模版内容是否替换指令的标记。这个其实在页面看上去没什么区别，只是html代码不同。
 * 3，replace个人建议都是true,一来自己看元素时候省眼，二来别人看的时候还不暴露写法...
 * */

var app = angular.module("testDirectiveReplaceTest",[]);

app.directive("replaceDef",function(){
    var dir = {};
    dir.restrict = "E";
    dir.replace = false;//和不写一效果
    dir.template = "<div>我是模版中的内容</div>";
    return dir;
}).directive("replaceTrue",function(){
    var dir = {};
    dir.restrict = "E";
    dir.replace = true;
    dir.template = "<div>我是模版中的内容</div>";
    return dir;
});