angular directive 入门

淩亂°似流年 2022-05-21 12:37 206阅读 0赞

## angular directive 入门 ##

“控制器应该尽可能保持短小精悍，而在控制器中进行DOM操作和数据操作则是一个不好的实践。”

“设计良好的应用会将复杂的逻辑放到指令和服务中。通过使用指令和服务，我们可以将控制器重构成一个轻量且更易维护的形式”

《AngularJs权威教程》

## Hello Directive ##

<body ng-app="myApp">
        <my-student></my-student>
        <script type="text/javascript">
            var app = angular.module('myApp',[]);
            app.directive("myStudent",function(){
                return {
                    restrict:"EA",
                    template:"Hello Directive"
                }
            })
        </script>
    </body>

![SouthEast][]

### *是的，创建一个指令就是这么简单，但是仅仅如此可是不行的，比如：如何让指令的html更丰富呢，如何让指令也能进行数据绑定呢，如何向指令中传递参数、方法呢，是否可以指令嵌套指令呢…请继续往后看* ###

## Directive结构分析 ##

### restrict:属性名称，取”EACM”中的任意一个或多个字母，它是用来限制指令的声明格式 ###

#### E element 元素名称    ####

<my-student></my-student>

#### A attribute 属性    ####

#### C class 类名    ####

#### M 注释    ####

### template:’指令的内容(html代码)’ ###

template:'<div><p>{
       {name}}</p></div>'
    app.directive("myStudent",function(){
                return {
                    restrict:"EA",
                    template:"<div><p>{
       {name}}</p></div>",
                    controller:function($scope){
                        $scope.name="CONST_Q"
                    }
                }
            })

![SouthEast 1][]

### templateUrl:’指令的内容(引用html文件内容作为指令内容)’ ###

####  ####

<div>
        <p>您好 {
       {name}}</p>
    </div>

app.directive("myStudent",function(){
                return {
                    restrict:"EA",
                    templateUrl:"child1.html",
                    controller:function($scope){
                        $scope.name="CONST_Q"
                    }
                }
            })

![SouthEast 2][]

### controller:指令的控制器，可以是自己的，也可以继承其他的 ###

<body ng-app="myApp">
        <div ng-controller="myCtrl">
            <p>Hello {
       {name}}</p>
        </div>
        <my-student></my-student>
        <script type="text/javascript">
            var app = angular.module('myApp',[]);
            app.controller("myCtrl",function($scope){
                $scope.name = "XiaoMing"
            })
            app.directive("myStudent",function(){
                return {
                    restrict:"EA",
                    templateUrl:"child1.html",
                    controller:function($scope){
                        $scope.name="小明"
                    }
                }
            })
        </script>
    </body>

![SouthEast 3][]

#### 或 ####

app.directive("myStudent",function(){
                return {
                    restrict:"EA",
                    templateUrl:"child1.html",
                    controller:'myCtrl'
                }
            })

### ![SouthEast 4][]   scope:指令的作用域对象,当你写上这个属性时，就表示这个directive不会从他的controller里承$scope对象，而是会重新创建一个。（封闭自定义的scope,希望自己的directive用在多处,一共三种状态形式） ###

#### @:外部scope赋值不影响scope的变量 ####

<div>
        <p>您好 {
       {name2}}</p>
        <button ng-click="updateName2()">修改用户名</button>
    </div>

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script type="text/javascript" src="../../lib/angular-1.4.1/angular.min.js"></script>
    </head>
    <body ng-app="myApp" ng-controller="myCtrl">
        <div  style="background-color: burlywood">
            <p>Hello {
       {name1}}</p>
            <button ng-click="updateName1()">Update Name</button>
        </div>
        <div my-student name3="{
       {name1}}"></div>
        <script type="text/javascript">
            var app = angular.module('myApp',[]);
            app.controller("myCtrl",function($scope){
                $scope.name1 = "XiaoMing";
                var i=1;
                $scope.updateName1 = function(){
                    $scope.name1 = $scope.name1 + (i++);
                }
            })
            app.directive("myStudent",function(){
                return {
                    restrict:"EA",
                    templateUrl:"child1.html",
                    scope:{
                        name2:'@name3'
                    },
                    controller:function($scope){
                        var i=1;
                        $scope.updateName2 = function(){
                            $scope.name2 = $scope.name2 + (i++);
                        }
                    }
                }
            })
        </script>
    </body>
    </html>

![SouthEast 5][]

### =:外部scope赋值会影响封闭scope变量 ###

scope:{
        name2:'=name3'
    },

![SouthEast 6][]

### &:允许外部scope传递一个函数、方法给封闭scope ###

#### 传递无参函数（需要注意变量的命名规则和书写规则–骆驼峰） ####

<div>
        <p>您好 {
       {name2}}</p>
        <button ng-click="updateName2()">修改用户名</button>
    </div>

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script type="text/javascript" src="../../lib/angular-1.4.1/angular.min.js"></script>
    </head>
    <body ng-app="myApp" ng-controller="myCtrl">
        <div  style="background-color: burlywood">
            <p>Hello {
       {name1}}</p>
            <button ng-click="updateName1()">Update Name</button>
        </div>
        <div my-student name3="name1" update-name3="updateName1()"></div>
        <script type="text/javascript">
            var app = angular.module('myApp',[]);
            app.controller("myCtrl",function($scope){
                $scope.name1 = "XiaoMing";
                var i=1;
                $scope.updateName1 = function(){
                    $scope.name1 = $scope.name1 + (i++);
                }
            })
            app.directive("myStudent",function(){
                return {
                    restrict:"EA",
                    templateUrl:"child1.html",
                    scope:{
                        name2:'=name3',
                        updateName2:'&updateName3'
                    }
                }
            })
        </script>
    </body>
    </html>

![SouthEast 7][]

#### 传递有参函数 ####

<div>
        <p>您好 {
       {name2}}</p>
        <button ng-click="updateName2({name4:name2})">修改用户名</button>
    </div>

<body ng-app="myApp" ng-controller="myCtrl">
        <div  style="background-color: burlywood">
            <p>Hello {
       {name1}}</p>
            <button ng-click="updateName1({name4:name1})">Update Name</button>
        </div>
        <div my-student name3="name1" update-name3="updateName1({name4:name1})"></div>
        <script type="text/javascript">
            var app = angular.module('myApp',[]);
            app.controller("myCtrl",function($scope){
                $scope.name1 = "XiaoMing";
                var i=1;
                $scope.updateName1 = function(name){
                    $scope.name1 = name.name4 + (i++);
                    console.log(name)
                }
            })
            app.directive("myStudent",function(){
                return {
                    restrict:"EA",
                    templateUrl:"child1.html",
                    scope:{
                        name2:'=name3',
                        updateName2:'&updateName3'
                    }
                }
            })
        </script>
    </body>

![SouthEast 8][]

### link:可以理解为directive被angular编译后执行的方法，指令的dom操作就可以写在这里面 ###

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

#### //scope 基本就是上面写到的scope ####

#### //element 简单的就是指令html的dom，可用于dom操作,类似$(‘xxx’) ####

#### //attrs 是个map对象，内容就是指令上所有的属性 ####

#### 例：<my-student name=”name”></my-student> ####

#### 即attrs=\{name:’name’\} ####

#### \} ####

###    replace:是否替换掉自定义的指令,　默认是false ###

#### 可切换true/false,然后打开浏览器的开发者模式查看elements对比效果 ####

###    transclude:指令中可以加入其它的html内容(可用于指令的嵌套)    ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script type="text/javascript" src="../../lib/angular-1.4.1/angular.js"> </script>
    </head>
    
    <body ng-app="myApp" ng-controller="myCtrl">
    <div>
        <my-student>
        </my-student>
    </div>
    <script> var app = angular.module("myApp", []); app.controller("myCtrl",function($scope){ $scope.stu = { name:'张三', age:20 } $scope.ageAdd = function(){ $scope.stu.age+=1; } $scope.ageCut = function(){ $scope.stu.age-=1; } }) app.directive("myStudent", function () { return { restrict: 'EA', template: '<div><ng-transclude age-add></ng-transclude>姓名:{ {stu.name}} 年龄:{ {stu.age}}<ng-transclude class="age-cut"></ng-transclude></div>', replace:true, transclude:true } }) app.directive("ageAdd",function(){ return { restrict:"EAC", template:'<button ng-click="ageAdd()">年龄自增</button>' } }) app.directive("ageCut",function(){ return { restrict:"EAC", template:'<button ng-click="ageCut()">年龄自减</button>' } }) </script>
    </body>
    </html>

![SouthEast 9][]

转自： [https://blog.csdn.net/const\_qiu/article/details/55049020][https_blog.csdn.net_const_qiu_article_details_55049020]

[SouthEast]: /images/20220521/a1e5a6a47b6648729b78c90ba45fff49.png
[SouthEast 1]: /images/20220521/563052d7195742d69dc6d385b5a752cc.png
[SouthEast 2]: /images/20220521/38fb1ffcfa5943c0a7ddbe53b28758a3.png
[SouthEast 3]: /images/20220521/555ab69601944eaf9dccf9c299e5f05b.png
[SouthEast 4]: /images/20220521/2f6dd34dbe154984a6cf6847553b08ef.png
[SouthEast 5]: /images/20220521/5674af98a1104c619d4bf45dfadf508b.png
[SouthEast 6]: /images/20220521/600381abe4c04986b8745a4511b46581.png
[SouthEast 7]: /images/20220521/aaa3face19db4af9bd79dc23d04eadd8.png
[SouthEast 8]: /images/20220521/e57df286130e46539c36db7c5fabf72f.png
[SouthEast 9]: /images/20220521/3d9f88984ee74c67a483acf27b61315a.png
[https_blog.csdn.net_const_qiu_article_details_55049020]: https://blog.csdn.net/const_qiu/article/details/55049020