angular學習的一些小筆記(中)之directive

directive裏面的幾個配置，上代碼就清晰了javascript

<!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>

這段代碼在瀏覽器上打開是這樣的，html

<my-directive><a href="#">click me</a></my-directive>

看到嗎，directive裏面的template在標籤的裏面，是標籤的子元素java

而後再看，在配置一個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替代了app

要是restrict有兩個值，好比上代碼google

<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>

這樣的話就會，spa

<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>

看到了嗎，兩個裏面都有templaterest