angular学习的一些小笔记，中之directive
directive里面的几个配置，上代码就清晰了
<!DOCTYPE html>
<html ng-app='app'>
<head>
<meta charset='UTF-8'>
<title>test</title>
<script type="text/javascript" src='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="#">click me</a>'
};
})
</script>
</html>这段代码在浏览器上打开是这样的，
<my-directive><a href="#">click me</a></my-directive>
看到吗，directive里面的template在标签的里面，是标签的子元素
然后再看，在配置一个replace
<body>
<a href="#">click me</a>
<script type="text/javascript">
angular.module('app',[])
.directive('myDirective',function(){
return{
restrict:'E',
replace:true,
template:'<a href="#">click me</a>'
};
})
</script>
</body>replace为true的时候可以看到的是原来的自定义标签被template替代了
要是restrict有两个值，比如上代码
<body>
<my-directive></my-directive>
<div my-directive></div>
<script>
angular.module('myApp', [])
.directive('myDirective', function() {
return {
restrict: 'AE', // modified line
template: '<a href="http://google.com">Click me</a>'
}
})
</script>
</body>这样的话就会，
<body>
<my-directive><a href="http://google.com">Click me</a></my-directive>
<div my-directive=""><a href="http://google.com">Click me</a></div>
<script>
angular.module('myApp', [])
.directive('myDirective', function() {
return {
restrict: 'AE', // modified line
template: '<a href="http://google.com">Click me</a>'
}
})
</script>
</body>看到了吗，两个里面都有template