AngularJS的自定义模板

最新推荐文章于 2020-12-28 20:35:14 发布

发疯的man

最新推荐文章于 2020-12-28 20:35:14 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： angularJS 文章标签： angularjs 标签函数注释 class

本文链接：https://blog.youkuaiyun.com/lzh657083979/article/details/78157513

angularJS 专栏收录该内容

17 篇文章

订阅专栏

第一种方式：

myInjectorModule.directive("xixi",function(){
    return {
        restrict:"CEAM",   //分别代表 类名，标签，属性，注释
        template:'<h1>1111111</h1>',  //模板
        replace:true,          //表示自定义的标签将被替换掉模板的，一般为true
        compile:function(){    //被渲染之后的回调函数
            console.log(1)
        }
    }
})

第二种方式：
注意，凡是遇到replace:true,的模板内容一定要加标签套着。不然报错

myInjectorModule.directive("xixi2",function(){
    return {
        restrict:"CEAM",
        templateUrl:'lzh',   //javascript的id
        replace:true,
        compile:function(){
            console.log(1)
        }
    }
})


<script type="text/ng-template" id="lzh">
    <h1>0000000</h1>
</script>
<xixi2></xixi2>

注意，一般模板会把原来标签里面的的东西给替换掉，如果想保留原来的东西，就需要如下设置

myInjectorModule.directive("xixi",function(){
    return {
        restrict:"CEAM",
        template:'<h1>1111111<span ng-transclude></span></h1>',   //意思是将原来的标签的内容添加到span中
        replace:true,
        prioryty:1,   //设置优先级，遇到多个模板的时候用，，不经常用
        terminal:true,  //不经常用
        transclude:true,
        compile:function(){
            console.log(1)
        }
    }
})


<xixi>222</xixi>      //结果为  111111 222

directive的其他用法，element绑定事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="angular.js"></script>
</head>
<body ng-app="app">
    <div ng-controller="myController">
        <div direc>
            11111
        </div>
    </div>
</body>
<script type="text/javascript">
    var app=angular.module("app",[]);
    app.controller("myController",function($scope){

    })
    app.directive("direc",function(){
        return function(scope,element,attrs){
            element.bind("click",function(){
                alert(11)
            })
        }
    })
</script>
</html>