AngularJS的自定义模板

来源：互联网发布：蓝月传奇龙魂数据编辑：程序博客网时间：2024/05/24 07:05

第一种方式：

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>

阅读全文

0 0