directive裡面的幾個配置，上代碼就清晰了 這段代碼在瀏覽器上打開是這樣的， 看到嗎，directive裡面的template在標簽的裡面，是標簽的子元素 然後再看，在配置一個replace replace為true的時候可以看到的是原來的自定義標簽被template替代了 要是restric ...
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
