AngularJS學習筆記（五）自定義指令（1）

時間 2019-11-08

原文原文鏈接

先來講說自定義指令

ng經過內置指令的方式實現了對html的加強，同時也賦予了咱們自定義指令的功能，讓咱們根據實際需求進行指令的定製。自定義指令涉及到模板（template）、做用域（scope）、數據綁定和Dom操做等內容，我也是正在學習中，寫的比較膚淺。javascript

如何自定義指令

從簡單的寫起，咱們先來認識幾個經常使用的配置吧，深刻點的我也不會哈。。。css

   App.directive("directiveName",function(){
      return {
        //指令可用在何處，通常有E(Elemenmt)、A(Attribute)、C(Class),還有一個註釋，這個就算了吧。默認爲A，也就是做爲屬性用。
         restrict: 'E',
        //是否替換指令元素。通常這樣調用元素<dialog></dialog>,當爲true的時候，頁面就不會出現dialog元素。
         replace: true,
        //指令模板，通常模板複雜的話，能夠單獨放置一個文件，而後使用templateUrl進行引用。
         template: '<div>。。。</div>',
        //這兒是做用域，若是沒有這個配置，則公用所在controller的域；若是有scope，則起到了隔離做用，這兒的key是template的表達式，value指的是元素的屬性key。
         scope: {                        
          key:value
        }
      };        
    });

只要這麼個定義了，頁面上就能夠高興的使用啦。下面來看幾個例子吧，實踐出真知啊。html

例子1.簡單的對話框，這個例子有點挫

<!DOCTYPE html>

<html ng-app="App">
<head>
    <link rel="stylesheet" type="text/css" href="http://sandbox.runjs.cn/uploads/rs/394/xjz9g1bv/bootstrap.css">
    <script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/394/xjz9g1bv/angular.js"></script>
    <script type="text/javascript">

      var App = angular.module("App", []);

      App.controller("ctrl", function ($scope) {
          
      });
                        
      App.directive("dialog",function(){
            return {
                //限制，也就是這個指令可用在何處，通常有E(Elemenmt)、A(Attribute)、C(Class),還有一個註釋，這個就算了吧。默認爲A，也就是做爲屬性用。
                  restrict: 'E',
               //是否替換指令元素。通常這樣調用元素<dialog></dialog>,當爲true的時候，頁面就不會出現dialog元素。
                  replace: true,
               //指令模板，通常模板複雜的話，能夠單獨放置一個文件，而後使用templateUrl進行引用。
                 template: '<div><div>{{dialogTitle}}</div><div>{{dialogContent}}</div></div>',
               //這兒是做用域，若是沒有這個配置，則公用所在controller的域；若是有scope，則起到了隔離做用，這兒的key是template的表達式，value指的是元素的屬性key。
                 scope: {
                   //dialogTitle指的是template的{{dialogTitle}}
                   //title是<dialog title='標題'></dialog>中的title;若是元素是這樣的：<dialog dialogTitle='標題'></dialog>，則下面的配置能夠簡寫成：dialogTitle:'@'
                   dialogTitle: '@title',
                   dialogContent:'@content'
               }
           }; 
     });
            
    </script>
</head>
    <body style='padding-top:10px;'>
        <div class='container' ng-controller="ctrl">
        <dialog title='我是標題' content='這個例子有點挫。。。'></dialog>
    </div>
    </body>
</html>

查看效果：java

點擊這裏查看效果。bootstrap

這個例子真的好搓啊，內容還有點，樣式真是挫，人真的是很感性的啊。估計這個例子你們看不下去了，我來找找Bootstrap的dialog樣式吧，看看下個例子吧。app

例子2.有模有樣的對話框

在這個例子裏，咱們要使用Bootstrap的模態框相關的樣式。額，咱們先來看下Bootstrap對模態框的定義：dom

<div class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

納尼，這麼複雜，這要讓我寫到template模板裏，估計是要寫瘋了。上面介紹了，template還有個兄弟，叫templateUrl，這個彷佛是個地址，能夠將複雜的模板內容寫到其中，而後連接一下，人生彷佛好起來了。函數

這兒再來點變更，就是：dialog的內容，我想寫成這樣<dialog>我是內容啊，內容。。。</dialog>，這兒就會用到transclude屬性了，當transclude爲true的時候，template中應至少有一個根元素，並且內部要有元素有ng-transclude屬性，這樣才能起來替換做用。學習

好吧，扯了這麼多，估計也沒看到，仍是來看看代碼吧。ui

<!DOCTYPE html>

<html ng-app="App">
<head>
    <link rel="stylesheet" type="text/css" href="http://sandbox.runjs.cn/uploads/rs/394/xjz9g1bv/bootstrap.css">
    <script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/394/xjz9g1bv/angular.js"></script>
        <script type="text/ng-template" id="dialogDirective">
        <div class="modal show">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">{{title}}</h4>
                    </div>
                    <div class="modal-body" ng-transclude>

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" >關閉</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->
    </script>
    <script type="text/javascript">

      var App = angular.module("App", []);

      App.controller("ctrl", function ($scope) {
          
      });
                        
            App.directive("dialog",function(){
                return {
                    restrict: 'E',
                    replace: true,
                    templateUrl: 'dialogDirective',
                    //transclude是必須的。
                    transclude:true,
                    scope: {
                        title: '@',
                    }
                };
            
            });
            
    </script>
</head>
    <body style='padding-top:10px;'>
        <div class='container' ng-controller="ctrl">
        <dialog title='我是標題'>
                    我是內容啊，我是內容，請回答。。。
                </dialog>
    </div>
    </body>
</html>

效果：

點擊這裏查看效果。

額，效果比上一個彷佛好多了呀，可是「關閉」按鈕爲何不能用呢？？？

原本這篇想這麼結束的，既然你問到了，那就只好再來一段了，且看下個例子

例子3.帶關閉功能的對話框呀

咱們上面的例子裏對話框卻是美美的，可是關閉呢，爲啥關閉不了，這兒又要用到一個新的屬性了，link。例子裏會充分體現link的用處：

<!DOCTYPE html>

<html ng-app="App">
<head>
    <link rel="stylesheet" type="text/css" href="http://sandbox.runjs.cn/uploads/rs/394/xjz9g1bv/bootstrap.css">
    <script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/394/xjz9g1bv/angular.js"></script>
        <script type="text/ng-template" id="dialogDirective">
        <div class='modal show'>
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" ng-click="close();"><span aria-hidden="true">×</span></button>
                        <h4 class="modal-title">{{title}}</h4>
                    </div>
                    <div class="modal-body" ng-transclude>

                    </div>
                    <div class="modal-footer">
                                                <!--注意：此處調用的是link方法中scope定義的close方法-->
                        <button type="button" class="btn btn-primary" ng-click="close();" >關閉</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->
    </script>
    <script type="text/javascript">

      var App = angular.module("App", []);

      App.controller("ctrl", function ($scope) {
          
      });
                        
            App.directive("dialog",function(){
                return {
                    restrict: 'E',
                    replace: true,
                    templateUrl: 'dialogDirective',
                    //transclude是必須的。
                    transclude:true,
                    //指令中定義了scope，起到了隔離做用，和ctrl中的scope已經不相關了。
                    scope: {
                        title: '@',
                    },
                    link:function(scope,elements,attributes){
                        //注意：由於指令裏定義了scope，因此link函數中的scope只包含指令中title，對於dom的行爲，應在link函數中定義。
                      scope.close=function(){
                            elements.removeClass('show');
                        }
                    }
                };
            
            });
            
    </script>
</head>
    <body style='padding-top:10px;'>
        <div class='container' ng-controller="ctrl">
        <dialog title='我是標題'>
                    我是內容啊，我是內容，請回答。。。
                </dialog>
    </div>
    </body>
</html>