angular directive 入门

最新推荐文章于 2024-02-05 21:19:58 发布

const_qiu

最新推荐文章于 2024-02-05 21:19:58 发布

阅读量3.3k

点赞数 2

分类专栏： JAVA WEB AngularJS

本文链接：https://blog.youkuaiyun.com/const_qiu/article/details/55049020

版权

JAVA WEB 同时被 2 个专栏收录

4 篇文章

订阅专栏

AngularJS

1 篇文章

订阅专栏

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>

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

Directive结构分析

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

E element 元素名称

<my-student></my-student>

A attribute 属性

<div my-student></div>

C class 类名

<div class="my-student"></div>

M 注释

<!-- directive:my-student -->

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"
                }
            }
        })

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

<!-- child1.html-->
<div>
    <p>您好 {{name}}</p>
</div>

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

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>

或

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

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

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

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

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

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

<div my-student name3="name1"></div>

scope:{
    name2:'=name3'
},

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

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

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

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

传递有参函数

<!-- child1.html-->
<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>

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>