angular directive 入门
来源：互联网 发布：仿nba98体育直播源码 编辑：程序博客网 时间：2024/06/05 03:55
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>
注：如有写的不好的地方，望指出，相互学习
0 0
- angular directive 入门
- angular directive
- angular directive
- angular directive中scope:{}
- angular directive详解
- angular scope of directive
- Angular directive 递归渲染
- Angular directive bug
- angular directive的使用
- angular directive 总结
- angular directive简介
- angular directive(指令)
- angular directive 不生效
- angular指令系统directive
- Angular 2 Directive
- angular directive详解之transclude
- angular directive详解之replace
- angular directive详解之scope
- UIView的常见属性和代码创建UIButton
- java基础学习总结——GUI编程(二)
- Java 多线程实例详解（三）
- cernter os 下搭建dns服务操作流程
- 即时通讯音视频开发
- angular directive 入门
- Struts从2.1升级到2.3版本过程
- Xcode重构功能
- Grade for Android（从 Gradle 和 AS 开始）
- megascans导入外部材质
- VS2012+Mysql
- AS修改快捷键
- 观察者模式
- Python爬虫学习系列教程
