首页 > 代码库 > angular学习的一些小笔记(中)之directive

angular学习的一些小笔记(中)之directive

2024-08-17 15:34:03   222人阅读

directive里面的几个配置，上代码就清晰了

<!DOCTYPE html>
<html ng-app=‘app‘>
<head>
    <meta charset=‘UTF-8‘>
    <title>test</title>
    <script type="text/javascript" src=http://www.mamicode.com/‘static/plugins/angular.min.js‘></script>
</head>
<body>
    <my-directive></my-directive>
</body>
<script type="text/javascript">
    angular.module(‘app‘,[])
    .directive(‘myDirective‘,function(){
        return{
            restrict:‘E‘,
            template:‘<a href="http://www.mamicode.com/#">click me</a>‘
        };
    })
</script>
</html>

这段代码在浏览器上打开是这样的，

<my-directive><a href=http://www.mamicode.com/"#">click me</a></my-directive>

看到吗，directive里面的template在标签的里面，是标签的子元素

然后再看，在配置一个replace

<body>
    <a href=http://www.mamicode.com/"#">click me</a>

<script type="text/javascript">
    angular.module(‘app‘,[])
    .directive(‘myDirective‘,function(){
        return{
            restrict:‘E‘,
            replace:true,
            template:‘<a href="http://www.mamicode.com/#">click me</a>‘
        };
    })
</script>
</body>

replace为true的时候可以看到的是原来的自定义标签被template替代了

 

angular学习的一些小笔记(中)之directive


联系
我们