2016年10月_xuanwuziyou

11月 10月 03月 01月

原创 angularJS 自定义指令属性：require

示例展示一个指令的template中使用到了另一个指令的例子。示例html: js:angular.module('myApp',[]) //定义第一个指令 bookList .directive('bookList',function(){ return { restrict:'ECAM',

2016-10-21 17:41:11 2703

原创 angularJS 自定义指令方法属性：controller 和属性：controllerAs

自定义指令中还可以定义controller属性，是一个function，可以在其中定义数据和方法，可以提供给该指令的link内的方法使用。示例的html: js:angular.module('myApp',[]).directive('bookList',function(){ return { restrict:'EC

2016-10-21 17:18:02 7936

原创 angularJS 自定义指令方法属性：compile、link

自定义指令还有compile属性，这个属性是一个function, 在其中可以更改dom元素，或者进行dom元素的事件绑定等。该function中可以返还一个function,返还的这个function就是link。自定义指令的link属性，也是一个function,通常在其中绑定dom元素的事件。示例：html: 一个dom上使用两个指令：custom-t

2016-10-21 16:52:01 4846

原创 angularJS 自定义指令属性：transclude、priority、terminal

自定义指令的属性 transclude：为true时，允许把html中新定义的指令中原来的dom运用到该指令的template中。属性priority，设置该指令的优先级，优先级大的先执行，默认指令的优先级是0（但ng-repeat指令的优先级默认是1000）。属性terminal:为true时，指示优先级小于当前指令的指令都不执行，仅执行到本指令。示例：html:

2016-10-21 15:23:12 2067

原创 angularJS 自定义指令属性：templateUrl

angularJS自定义指令中，设置指令的属性template可以定义需要的dom元素，除了使用template，还可以用templateUrl，这个templateUrl可以设置为一个页面的相对路径，如：templateUrl : ' tmp/other.html ' ，意为使用other.html的内容作为模板dom。或者把templateUrl设置为一个id，如：templateUrl

2016-10-21 12:06:30 8784

原创 angularJS 自定义指令属性：restrict、template、replace

假如我们要展示一个用户list，使用angularJS，可以这样做：先在控制器中定义用户列表的数组，再在html中写上相应的dom元素，如下：js:angular.module('myApp',[]).controller('myCtrl',['$scope',function($scope){ $scope.users=[ {id:12,name:'张三'},

2016-10-21 11:34:41 5373

原创 angularJS 常用的渲染指令、事件指令和节点指令

渲染指令： 1）ng-init：初始化变量例：ng-init="cityArr=['上海','北京','杭州']" 2）ng-bind：绑定模型例：p ng-bind="1+1">p> 3）ng-bind-template: 绑定模型不加{{}}则直接绑定内容例：p ng-bind-template="{{ 1+3 }}">p> 4）ng-re

2016-10-17 11:00:50 1571

原创 angularJS 自定义过滤器

本文使用三种方式自定义一个数组过滤器。数组list:[ { name:'张三', age:20, city:'上海' }, { name:'李思', age:30, city:'北京' }, { name:'王五', age:25, city:'深圳' }]1.自定义过滤器方式一（在controller方法内定义一个方法）html:

2016-10-13 16:42:48 1817

转载 angularJS 过滤器练习

本例展示产品列表，使用angular过滤器 orderBy对产品进行排序，具体是点击列标题时交替进行正序倒序排列；同时使用angular过滤器 filter 可根据输入的产品名称搜索出对应产品，实现模糊查询。页面运行如下：输入"pad" 则自动显示相关产品，点击“产品价格”按价格低到高排序：html: Title

2016-10-13 15:38:33 570

原创 angularJS 过滤器

1.数字格式化过滤器 number{{ 123456789 | number }} 结果：12,345,678 每3位用逗号分隔{{ 12345.6789 | number:2 }} 结果：12,345.68 每3位用逗号分隔，并保留2位小数2.现金格式化过滤器 currency{{ 999999 | currency }} 结果： $999,9

2016-10-13 14:30:26 348

原创 angularJS 自定义工厂和服务实现共享数据

1.自定义工厂，可返回任意类型的数据自定义工厂方式一 .factory方法var app=angular.module('myApp',[]);app.factory('CustomFactory',function(){ return 'aaabbb';});自定义工厂方式二 $provide.factory方法angular.module('m

2016-10-13 14:27:24 2418

转载 angularJS 购物车练习

本文是一个简单的购物车练习，功能包括增加、减少某商品的数量，从而影响该商品的购买总价以及所有商品的购买总价；从购物车内移除一项商品；清空购物车。页面效果如图：若使用js或jquery来实现这个页面，会需要绑定很多事件，如减少数量按钮事件，增加数量按钮事件，移除某项商品事件，清空购物车事件，而这些事件之中很多代码很重复，比如计算某项商品的总购买价，计算所有商品的购买总价，不胜

2016-10-12 18:01:18 1348 1

原创 angularJS $scope的$watch方法监听model改变

$scope有个$watch方法，可以监听指定的model的改变，一旦model改变则触发（执行）传入其中的方法，该方法接收三个参数，如下$scope.$watch('要监听的model名' , function(newValue,oldValue){ }, bool值指示是否监听的是对象)，其中newValue指向所监听的model，即两者是一回事，而oldValue则是所监听mode

2016-10-12 17:37:35 6491