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>

效果：

点击这里查看效果。

小结

本篇只是大体了解了自定义指令，下一步，咱们还要深刻了解自定义指令的相关应用。