angular学习整理（二）---指令

墨蓝 2022-07-12 05:36 175阅读 0赞

接着上文说

其实在angularjs中。最复杂的一部分就是指令了（directive），指令的主要作用就是用来操纵和修改DOM，我们既可以使用angular提供的指令，也可以根据自己的需要来自定义指令。

angular提供的指令主要有ng-model ng-app ng-click等，但是更多的情况是我们需要根据自己的业务需求来自定义指令

举个例子，还记得上个博客中的那个service的例子嘛，好了，现在我想添加一个button，用来添加person

module.directive('addPersonButton',\['Person',function(Person)\{

return \{

restrict:'A',

link:function(scope,element,attrs)\{

element.bind('click',function()\{

Person.addPerson(\{name:'hahh',age:20\});

\});

\}\]);

我们在我们的html中使用该指令：

<button add-person-button>Add Person </button>然后就可以随心所欲的添加了，以后每次要添加的时候我只要使用下这个指令就可以啦

好了，现在我们开始详细讲解：

你可以通过.directive函数来添加自定义的指令。

常见的自定义指令有两种：

一种是通过module直接定义如：

angular.module('starter')  
        .directive('myCustomer', function() {  
           return {  
              restrict: 'E',  
              templateUrl: 'directiveTest/my-customer.html'  
       };  
      })  
     })

第二种是借助于$compileProvider服务，通过$compileProvide.directive定义

var myApp = angular.module('myApp', [], ['$compileProvider',function ($compileProvider) {  
       $compileProvider.directive('customTags',function(){  
        return {  
          restrict:'ECAM',  
          template:'<div>custom-tags-html</div>',  
          replace:false  
        }  
      });  
    }])

要调用自定义指令，HTML元素上需要添加自定义指令名，使用驼峰法来命名一个指令，如上文的addPersonButton,使用时需要-来分割，于是变为add-person-button

现在来详细描述下指令中常见参数：

我们挨个实验下：

元素名：

举例：

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> 
    </head>
    <body ng-app="myApp">
    
    <first-test></first-test>
    
    
    <script>
    //添加我们上文写的directive
    </script>
    
    
    <p><strong>注意：</strong> 你必须设置 <b>restrict</b> 的值为 "C" 才能通过类名来调用指令。</p>
    
    
    </body>

运行结果：

![Center][]

通常，directive默认的作用域是当前的父作用域，问题来了，我们在不同的controller中父作用域是不同的，我们想创建自己的作用域该如何做呢，或者说我想拥有自己的作用域当我需要用父作用域的变量的时候我再用应该怎么做呢，这时候就不得不说angular中的scope属性

scope的取值有两种：

false:默认使用的是父scope,

举个例子：

<!DOCTYPE html>
    <html ng-app='MyApp'>
    <meta charset="utf-8">
        <head>
           <script type="text/javascript" src='https://code.angularjs.org/1.5.10/angular.min.js'></script>
            <script type="text/javascript">
    		function testC(){};
    
    var app=angular.module('MyApp',[]);
    app.controller('testC',testC).directive('myDirective', function() {
        return {
            restrict: 'E',
            replace: true,
            template: '<div><p>scope：<input type="text" ng-model="input"></p><p>结果：{
       {input}}</p></div>',
            scope: false,   
        }
    });
    </script>
    <body>
    <body  ng-controller="testC">
        <p>父scope：<input type="text" ng-model="input"></p>
    
        
        <my-directive></my-directive>
    </body>
    </body>
    </html>

结果如下：

![Center 1][]  
可以看出来在directive中的input值完全是随着父scope的input值而变化，如果我们想单独创建自己的作用域，只需将scope这个属性定义为\{\}即可

<!DOCTYPE html>
    <html ng-app='MyApp'>
    <meta charset="utf-8">
        <head>
           <script type="text/javascript" src='https://code.angularjs.org/1.5.10/angular.min.js'></script>
       
            <script type="text/javascript">
    		function testC(){};
    
    var app=angular.module('MyApp',[]);
    app.controller('testC',testC).directive('myDirective', function() {
        return {
            restrict: 'E',
            replace: true,
            template: '<div><p>scope<input type="text" ng-model="input"></p><p>result {
       {input}}</p></div>',
            scope: {},   
        }
    });
    </script>
    <body>
    <body  ng-controller="testC">
        <p>father scope<input type="text" ng-model="input"></p>
    
      
        <my-directive></my-directive>
    </body>
    </body>
    </html>

3.现在我们创建独立的scope，但是我们希望能和父scope通信，即需要让子scope跟父scope中的变量进行绑定，常用的绑定策略有3种

*  @单向绑定，外部scope能够影响内部的scope，但是内部的scope不能影响外部的scope
 *  =:双向绑定，外部scope和内部的scope的model能够相互影响，相互改变
 *  &：把内部scope的函数的返回值和外部scope的任何属性绑定起来

先来看第一种：@

<!DOCTYPE html>
    <html ng-app='MyApp'>
    <meta charset="utf-8">
        <head>
           <script type="text/javascript" src='https://code.angularjs.org/1.5.10/angular.min.js'></script>
       
            <script type="text/javascript">
    		function testC(){};
    
    var app=angular.module('MyApp',[]);
    app.controller('testC',testC).directive('myDirective', function() {
        return {
            restrict: 'E',
            replace: true,
            template: '<div><p>scope<input type="text" ng-model="selfinput"></p></div>',
            scope: {
    		selfinput:'@'
    		},   
        }
    });
    </script>
    <body>
    <body  ng-controller="testC">
        <p>father scope<input type="text" ng-model="input"></p>
    
      
        <my-directive selfinput={
        {input}}></my-directive>
    </body>
    </body>
    </html>

![Center 2][]

可以看出来父变的时候子scope也变，但是scope变的时候父scope不变

看第二种：

双向绑定：=

<!DOCTYPE html>
    <html ng-app='MyApp'>
    <meta charset="utf-8">
        <head>
           <script type="text/javascript" src='https://code.angularjs.org/1.5.10/angular.min.js'></script>
       
            <script type="text/javascript">
    		function testC(){};
    
    var app=angular.module('MyApp',[]);
    app.controller('testC',testC).directive('myDirective', function() {
        return {
            restrict: 'E',
            replace: true,
            template: '<div><p>scope<input type="text" ng-model="selfinput"></p></div>',
            scope: {
    		selfinput:'='
    		},   
        }
    });
    </script>
    <body>
    <body  ng-controller="testC">
    
        <p>father scope<input type="text" ng-model="input"></p>
    
      
        <my-directive selfinput=input></my-directive>
    </body>
    </body>
    </html>

![Center 3][]

可以看出来现在无论父scope变还是子scope变都会相互影响

第三种：

符号&表示绑定一个函数

<!DOCTYPE html>
    <html ng-app='MyApp'>
    <meta charset="utf-8">
        <head>
           <script type="text/javascript" src='https://code.angularjs.org/1.5.10/angular.min.js'></script>
       
            <script type="text/javascript">
    	
    
    var app=angular.module('MyApp',[]);
    app.controller('testC',['$scope',  
        function($scope) {  
            $scope.test = function(){alert()};  
        }  
    ]).directive('myDirective', function() {
        return {
            restrict: 'E',
            replace: true,
            template: '<div><button ng-click=clickme()>click me please</button></div>',
            scope: {
    		clickme:'&'
    		},   
        }
    });
    </script>
    <body>
    <body  ng-controller="testC">
    
        <p>father scope<input type="text" ng-model="input"></p>
    
      
        <my-directive clickme='test()'></my-directive>
    </body>
    </body>
    </html>

结果当我们点击按钮的时候将自动弹出

可能又有童鞋发出疑问了，说如果我想要调用父类带参数的方法，我该如何传递参数呢

下面直接上代码吧

<!DOCTYPE html>
    <html ng-app='MyApp'>
    <meta charset="utf-8">
        <head>
           <script type="text/javascript" src='https://code.angularjs.org/1.5.10/angular.min.js'></script>
       <script type="text/javascript">
    var app=angular.module('MyApp',[]);
    app.controller('testC',['$scope',  
        function($scope) {  
            $scope.test = function(message){alert(message)};  
        }  
    ]).directive('myDirective', function() {
        return {
            restrict: 'E',
            replace: true,
            template: "<div><input type='text'  ng-model='answer'><button ng-click='clickme({message:answer})'>click me please</button></div>",
            scope: {
    		clickme:'&'
    		},   
        }
    });
    </script>
    <body>
    <body  ng-controller="testC">
        <my-directive clickme='test(message)'></my-directive>
    </body>
    </body>
    </html>

这样就完成了传递参数，ps:如果传递的是字符串的话，可以直接

return {
            restrict: 'E',
            replace: true,
            template: "<div><input type='text'  ng-model='answer'><button ng-click=clickme({message:‘goodmessage’})>click me please</button></div>",
            scope: {
    		clickme:'&'
    		},

其他情况相同

好了今天的指令就写到这里了，哈哈

欢迎大家批评指正

[Center]: /images/20220711/5b6af703176d47cea9d917e2d959edb4.png
[Center 1]: /images/20220711/17e186dee8484f24bb5a53706765c9c6.png
[Center 2]: /images/20220711/20f2732a20c049058b324836f0f38ce1.png
[Center 3]: /images/20220711/f0c3f3a477f243afae425921f2b242e8.png