angular directive 入门

Angularjs 前端之家
前端之家收集整理的这篇文章主要介绍了angular directive 入门，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
@H_404_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>

是的，创建一个指令就是这么简单，但是仅仅如此可是不行的，比如：如何让指令的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",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",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",controller:function($scope){
                    $scope.name="小明"
                }
            }
        })
    </script>
</body>

或

app.directive("myStudent",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',function($scope){
            $scope.name1 = "XiaoMing";
            var i=1;
            $scope.updateName1 = function(){
                $scope.name1 = $scope.name1 + (i++);
            }
        })
        app.directive("myStudent",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',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',function($scope){
            $scope.name1 = "XiaoMing";
            var i=1;
            $scope.updateName1 = function(name){
                $scope.name1 = name.name4 + (i++);
                console.log(name)
            }
        })
        app.directive("myStudent",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",template:'<button ng-click="ageCut()">年龄自减</button>'
        }
    })
</script>
</body>
</html>



注：如有写的不好的地方，望指出，相互学习



猜你在找的Angularjs相关文章

AngularJS 简介
AngularJS 是一个JavaScript 框架。它可通过 注：建议把脚本放在 元素的底部。这会提高网页...
angluarjs中页面初始化的时候会出现语法{{}}在页面中问题
angluarjs中页面初始化的时候会出现语法{{}}在页面中问题，也即是页面闪烁问题。出现这个的...
AngularJS 指令
AngularJS 通过被称为指令的新属性来扩展 HTML。AngularJS 指令AngularJS 指令是扩展的 HT...
AngularJS 表达式
AngularJS 使用表达式把数据绑定到 HTML。AngularJS 表达式AngularJS 表达式写在双大括号内...
AngularJS 表格
ng-repeat 指令可以完美的显示表格。在表格中显示数据 {{ x.Name }} {{ x.Country }} 使用...
AngularJS 控制器
AngularJS 控制器控制AngularJS 应用程序的数据。AngularJS 控制器是常规的JavaScript 对象...
AngularJS Filters
过滤器可以使用一个管道字符（|）添加到表达式和指令中。AngularJS 过滤器AngularJS 过滤器...
KeyPress 和KeyDown 、KeUp之间的区别
keyup适用于文本框的数据输入和同步，以及数据的获取；keydown 与 keypress更适用于通过键...
angularjs -- 页面模板清除
angularJs模板缓存的清除，包括传统的 HTML标签设置清除缓存，以及angularJs的一些配置清除...
angularjs -- 监听angularJs列表数据是否渲染完毕
前端在做数据渲染的时候经常会遇到在数据渲染完毕后执行某些操作，这几天就一直遇到在列表...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作