angularJs 自定义指令 常用方法 格式转换 过滤器
一、自定义指令
语法：
var app = angular.module('myModule',['ng']);
app.directive(name,fn);
自定义指令：
restrict:'EACM'
E-->Element 元素
A-->Attribute 属性
C-->Class
M-->Comment 注释（在指令中添加一个属性：replace:true）
新指令的命名：
①驼峰式
②前缀一般是公司或者项目的简写，后缀一般是指令的作用
③使用指令: tsHello--->ts-hello
在第二个参数 指定一个方法，在方法中返回一个对象设置指令。对象中template、restrict、replace、scope。。。
总结：如果要参数的传递，需要在创建指令的时候，加上scope，同时指定对应的属性的名称（testName），在使用指令的时候，需要加上对应的属性（test-name=''）
创建自定义的指令 tsDirective,传入ts-name="Hello Directive"，调用指令（作为元素来使用）显示出来。
1 <!DOCTYPE html> 2 <html ng-app="myModule"> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <script src="js/angular.js"></script> 6 <title></title> 7 </head> 8 <body> 9 作为属性 10 <div ts-hello></div> 11 作为class 12 <div class="ts-hello"></div> 13 作为标签 14 <ts-hello></ts-hello> 15 作为注释 16 <!-- directive:ts-hello --> 17 <script> 18 var app = angular.module('myModule',['ng']); 19 app.directive('tsHello',function(){ 20 return { 21 template:'<h1>hello direction</h1>', 22 restrict:'EACM',//作为class调用 23 replace:true//注释调用 24 }; 25 }); 26 </script> 27 </body> 28 </html>
二、双向数据绑定
1、方向1的绑定（Model数据 绑定到View）
实现方法：{{name}}、常用指令（ngRepeat/ngBind/ngIf...）
相比DOM操作：先去查找元素，再去设置元素，只需要把model数据绑定视图上，数据改，视图就会更新。
1 <!DOCTYPE html> 2 <html ng-app="myModule"> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <script src="js/angular.js"></script> 6 <title></title> 7 </head> 8 <body> 9 <div ng-controller="myCtrl"> 10 <div>{{num}}</div> 11 <p><button ng-click="add()">点我</button></p> 12 </div> 13 <script> 14 var app = angular.module('myModule',['ng']); 15 app.controller('myCtrl',function($scope){ 16 $scope.num='0'; 17 $scope.add=function(){ 18 $scope.num++; 19 } 20 }); 21 </script> 22 </body> 23 </html>
2、方向2的绑定（将View数据绑定到Model数据）
实现方法只有一种方式： ng-model
<input type='text' ng-model='myText'/>
$scope.$watch('模型变量名',function(){})
1 <!DOCTYPE html> 2 <html ng-app="myModule"> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <script src="js/angular.js"></script> 6 <title></title> 7 </head> 8 <body> 9 <div ng-controller="myCtrl"> 10 <input type="text" ng-model="mytext"/> 11 <p>{{mytext}}</p> 12 </div> 13 <script> 14 var app = angular.module('myModule',['ng']); 15 app.controller('myCtrl',function($scope){ 16 $scope.$watch('mytext',function(){ 17 console.log($scope.mytext); 18 }); 19 }); 20 </script> 21 </body> 22 </html>
留言本：多行文本输入框textarea、
1 <!DOCTYPE html> 2 <html ng-app="myModule"> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <script src="js/angular.js"></script> 6 <title></title> 7 </head> 8 <body> 9 <div ng-controller="myCtrl"> 10 <input type="text" ng-model="mytext"/> 11 <p>{{mytext}}</p> 12 </div> 13 <script> 14 var app = angular.module('myModule', ['ng']); 15 app.controller('myCtrl', function () { 16 17 }); 18 </script> 19 </body> 20 </html>
是否同意：复选框 checkbox
1 <!DOCTYPE html> 2 <html ng-app="myModule"> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <script src="js/angular.js"></script> 6 <title></title> 7 </head> 8 <body> 9 <div ng-controller="myCtrl"> 10 <p> 11 <select ng-options="flower.name for flower in flowers" ng-model="flower"></select> 12 <img src="img/{{flower.src}}" alt=""/> 13 </p> 14 <p> 15 <input id="sel" type="checkbox" ng-model="isAble"/><label for="sel">同意</label> 16 </p> 17 <p> 18 <button ng-disabled="!isAble">注册</button> 19 </p> 20 </div> 21 <script> 22 var app = angular.module('myModule', ['ng']); 23 app.controller('myCtrl', function ($scope) { 24 $scope.flowers=[ 25 {name:'水仙花',src:'1.jpg'}, 26 {name:'牡丹花',src:'2.jpg'}, 27 {name:'喇叭花',src:'3.jpg'}, 28 {name:'王八花',src:'4.jpg'} 29 ]; 30 $scope.flower= $scope.flowers[0]; 31 }); 32 </script> 33 </body> 34 </html>
三、过滤器
过滤器是用在表达式中，实现对表达式结果的筛选、过滤、格式化，达到更好的表现效果
语法：|--》管道
{{表达式 | 过滤器1：'name' | 过滤器2 }}
currency 货币样式的过滤器
date 日期
uppercase
lowecase 大小写的转换
orderBy 升序或者降序 orderBy:'age':true
limitTo 限定显示的数量
number 限制显示小数点后几位
练习：过滤器，模拟一个list=[{name,age,score},{}],、
①按照age升序，②按照score降序并只显示前三名
1 <!DOCTYPE html> 2 <html ng-app="myModule"> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <script src="js/angular.js"></script> 6 <title></title> 7 </head> 8 <body> 9 <div ng-controller="myCtrl"> 10 <p>{{price}}</p> 11 <p>{{price | currency}}</p> 12 <p>{{price | currency:'￥'}}</p> 13 <p>{{price | currency:'王八'}}</p> 14 <!-- 日期 --> 15 <p>{{nowDate | date:'yyyy-mm-dd'}}</p> 16 <!-- 大小写转换 --> 17 <p>{{name | uppercase}}</p> 18 <p>{{name | lowercase}}</p> 19 <!-- 排序 --> 20 <p> 21 <ul> 22 <li ng-repeat="obj in list | orderBy:'age'"> 23 {{obj.name+" "+obj.age+" "+obj.score}} 24 </li> 25 26 </ul> 27 </p> 28 <!-- 反序 --> 29 <p> 30 <ul> 31 <li ng-repeat="obj in list | orderBy:'age':true"> 32 {{obj.name+" "+obj.age+" "+obj.score}} 33 </li> 34 35 </ul> 36 </p> 37 <!-- limitto(限制) --> 38 <p> 39 <ol> 40 <li ng-repeat="tmp in arr | limitTo : '5'">{{tmp}}</li> 41 </ol> 42 </p> 43 <!-- age升序 只显示前三名--> 44 <p> 45 <ul> 46 <li ng-repeat="obj in list | orderBy:'age':true | limitTo:'3'"> 47 {{obj.name+' '+obj.age+' '+obj.score}} 48 </li> 49 </ul> 50 </p> 51 <!-- ，score降序 只显示前三名--> 52 <p> 53 <ul> 54 <li ng-repeat="obj in list | orderBy:'score':true | orderBy:'age' | limitTo:'3'"> 55 {{obj.name+' '+obj.age+' '+obj.score}} 56 </li> 57 </ul> 58 </p> 59 <!-- uum 限制显示小数点后几位 --> 60 <p> 61 {{num | number:'8'}} 62 </p> 63 </div> 64 <script> 65 var app = angular.module('myModule', ['ng']); 66 app.controller('myCtrl', function ($scope) { 67 $scope.price=20; 68 $scope.nowDate= new Date(); 69 $scope.name='Maitch'; 70 $scope.list=[ 71 {name:'lucy1',age:'18',score:'81'}, 72 {name:'lucy2',age:'15',score:'82'}, 73 {name:'lucy3',age:'19',score:'84'}, 74 {name:'lucy4',age:'17',score:'83'}, 75 {name:'lucy5',age:'16',score:'87'} 76 ]; 77 $scope.arr=[10,20,30,40,50,60,70,80]; 78 $scope.num=3.1415926765987421589; 79 }); 80 </script> 81 </body> 82 </html>
四、常用函数
forEach
uppercase/lowercase
toJson/fromJson
序列化：将一个json对象转换为json格式的字符串
反序列化：将一个json格式的字符串 转换为json格式的对象
1 <!DOCTYPE html> 2 <html ng-app="myModule"> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <script src="js/angular.js"></script> 6 <title></title> 7 </head> 8 <body> 9 <div ng-controller="myCtrl"> 10 <button ng-click="getUrl()">点击获取当前url</button> 11 <p>{{url}}</p> 12 </div> 13 <script> 14 var app = angular.module('myModule', ['ng']); 15 app.controller('myCtrl', function ($scope,$location) { 16 var list=[11,22,33,44,55,66,77,88,99]; 17 var student = {name:'monkey',age:18}; 18 var name = 'Lucy' 19 console.log(angular.uppercase(name)); 20 console.log(angular.lowercase(name)); 21 angular.forEach(list,function(value,key){ 22 console.log('value is '+value + ' key is '+key); 23 }); 24 angular.forEach(student,function(value,key){ 25 // console.log(key + " : "+value); 26 console.log('value is '+value + ' key is '+key); 27 }); 28 var jsonObj = {"name":"mary","age":20}; 29 // 序列化 将对象序列化为字符串 toJson 30 var jsonstr = angular.toJson(jsonObj); 31 console.log(jsonstr); 32 // 反序列化 将字符串反序列化为对象 fronJson 33 var jsonfrom = angular.fromJson(jsonObj); 34 console.log(jsonfrom); 35 // $location 36 $scope.url= ''; 37 $scope.getUrl=function(){ 38 $scope.url = $location.absUrl(); 39 console.log($scope.url); 40 } 41 42 }); 43 </script> 44 </body> 45 </html>
五、服务
在ng中 服务 是 一种单例对象，所谓单例，服务在每一个应用中只会被实例化一次。
功能：为应用提供数据和对象
两大类：①内置的服务 ②自定义服务
1、内置的服务的使用方法
如果在控制器中，使用ng中内置的服务，需要在控制器的回调函数中
①将对应的服务给注入进来
②使用服务所提供的数据和对象
app.controller('myCtrl',function($scope,$location){
var url = $location.absUrl();
});
2、控制器和作用范围
$scope与$rootScope：
$scope是$rootScope的子作用域控制对象，$rootScope的id为1，其他的为2,3....
不同的控制器之间，所对应的作用域控制对象($scope),之间是相互隔离的，如果要共享数据，怎么办？
借助$rootScope这个根作用域控制对象来实现。
如果父作用域对象想要调用子作用域对象的变量或者方法，ng提供了2个方法：
①$broadcast 将事件从父亲传递给子级
$scope.$broadcast(eventName,data);
1 <!DOCTYPE html> 2 <html ng-app="myModule"> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <script src="js/angular.js"></script> 6 <title></title> 7 </head> 8 <body> 9 <div ng-controller="myCtrl"> 10 <p>{{number}}</p> 11 </div> 12 <div ng-controller="myCtrl2"> 13 <p>{{number}}</p> 14 <div ng-controller="myCtrl3"><!--作为myCtrl2的子元素调用myCtrl2的数据--> 15 <p>{{school}}</p> 16 </div> 17 </div> 18 <script> 19 var app = angular.module('myModule', ['ng']); 20 app.controller('myCtrl', function ($scope,$rootScope) { 21 // $scope.number = 100; 22 $rootScope.number = 100; 23 console.log($scope); 24 console.log($rootScope); 25 }); 26 app.controller('myCtrl2', function ($scope) { 27 $scope.school = 'Tarena'; 28 console.log($scope); 29 }); 30 app.controller('myCtrl3', function ($scope) { 31 console.log($scope); 32 }); 33 </script> 34 </body> 35 </html>
②$emit 将事件从子级传递给父亲
$scope.$emit(eventName,data);
接收：
$scope.$on(eventName,function(event,data){
})
1 <!DOCTYPE html> 2 <html ng-app="myModule"> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <script src="js/angular.js"></script> 6 <title></title> 7 </head> 8 <body> 9 <div ng-controller="myCtrl"> 10 <!--调用 子级 中的方法--> 11 <button ng-click="functionCall()">调用myCtrl02当中的方法</button> 12 <div ng-controller="myCtrl2"> 13 <!--调用 父级 中的方法--> 14 <button ng-click="toChild()">发送到子作用对象</button> 15 <div ng-controller="myCtrl3"> 16 <p>{{count}}</p> 17 </div> 18 </div> 19 </div> 20 <script> 21 var app = angular.module('myModule', ['ng']); 22 app.controller('myCtrl', function ($scope) { 23 $scope.$on('event_parent',function(event,data){ 24 console.log('已经接受到来自子元素的数据'); 25 console.log(data); 26 $scope.functionCall = data; 27 }); 28 }); 29 app.controller('myCtrl2', function ($scope) { 30 $scope.toParent = function(){ 31 console.log('to parent function is code'); 32 } 33 $scope.$emit('event_parent',$scope.toParent); 34 $scope.toChild = function(){ 35 $scope.number = 10; 36 $scope.$broadcast('event_child',$scope.number); 37 } 38 }); 39 app.controller('myCtrl3', function ($scope) { 40 $scope.$on('event_child',function(event,data){; 41 $scope.count = data; 42 }); 43 }); 44 </script> 45 </body> 46 </html>
双向数据绑定
ngChecked/ngClick/ngModel/ngChange
分析：
模型数据是一个对象数组
步骤：
①ui搞定
②部分选中
③全部选中
1 <!DOCTYPE html> 2 <html ng-app="myApp"> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <script src="js/angular.js"></script> 6 <title></title> 7 </head> 8 <body> 9 10 <div ng-controller="myCtrl"> 11 <table> 12 <thead> 13 <tr> 14 <th>选择</th> 15 <th>姓名</th> 16 <th>生日</th> 17 </tr> 18 </thead> 19 20 <tbody> 21 <tr ng-repeat="obj in list"> 22 <td> 23 <input 24 ng-click="funcChange()" 25 type="checkbox" 26 ng-model="obj.isSelected" 27 ng-checked="selectAll" 28 /> 29 </td> 30 <td> 31 {{obj.name}} 32 </td> 33 <td> 34 {{obj.birthday}} 35 </td> 36 </tr> 37 </tbody> 38 39 </table> 40 41 <br/> 42 <input 43 type="checkbox" 44 ng-checked="select" 45 ng-model="selectAll" 46 ng-click="changeAll()" 47 /> 全选/取消全选 48 <br/> 49 <button ng-click="checkStatus()">查看</button> 50 51 </div> 52 53 <script> 54 var app = angular.module('myApp', ['ng']); 55 56 app.controller('myCtrl', function ($scope) { 57 $scope.list = [ 58 {name: 'Golden', birthday: '2011-11-11', isSelected: false}, 59 {name: 'King', birthday: '2012-10-12', isSelected: false}, 60 ] 61 62 $scope.changeAll = function(){ 63 64 angular.forEach($scope.list, function (value,key) { 65 value.isSelected = $scope.selectAll; 66 }) 67 } 68 69 70 // 对于对象进行操作的时候（点击），执行funcChange 71 // 判断对象数组中isSelected的true或者false，决定select是否为true 72 $scope.funcChange = function () { 73 $scope.select = true; 74 angular.forEach($scope.list, 75 function (value, key) { 76 $scope.select = $scope.select&&value.isSelected 77 }) 78 } 79 80 $scope.checkStatus = function () { 81 var str = ""; 82 angular.forEach($scope.list, 83 function (value, key) { 84 if (value.isSelected) { 85 str += value.name + "被选中" 86 } 87 }) 88 if (str == "") { 89 str = "都未选中"; 90 } 91 alert(str); 92 } 93 94 }) 95 96 </script> 97 98 </body> 99 </html>
浙公网安备 33010602011771号