随笔分类 -  AngularJS

摘要:摘要: 详细的了解require选项在directive的作用和用法 谈require选项之前,应该先说说controller选项,controller选项允许指令对其他指令提供一个类似接口的功能,只要别的指令(甚至是自己)有需要,就可以获取该controller,将其作为一个对象,并取得其中的所有 阅读全文
posted @ 2017-07-25 11:12 铭绘 阅读(510) 评论(0) 推荐(0)
摘要:开门见山地说,scope:{}使指令与外界隔离开来,使其模板(template)处于non-inheriting(无继承)的状态,当然除非你在其中使用了transclude嵌入,这点之后的笔记会再详细记录的。但是这显然不符合实际开发中的需求,因为实际上,我们经常想要我们的指令能够在特定的情况下与外界 阅读全文
posted @ 2017-07-25 10:31 铭绘 阅读(278) 评论(0) 推荐(0)
摘要:本篇主要介绍angular中的表单验证: 表单验证主要有以下一些内容: 1. required指令: 相当于html5的required属性,验证不能为空 2. ng-maxlength属性: 验证内容的长度最大值 3. ng-minlength属性: 验证内容的长度最小值 4. 表单名.$vali 阅读全文
posted @ 2017-07-19 15:54 铭绘 阅读(279) 评论(0) 推荐(0)
摘要:使用angular指令可以自己扩展html语法,还可以做很多自定义的事情.在后面会专门讲解这一块的知识,这一篇只是起到了解入门的作用. 与控制器,过滤器,服务,一样,可以通过模块实例的directive的方法来创建指令: var someModule = angular.module('SomeMo 阅读全文
posted @ 2017-07-19 15:45 铭绘 阅读(466) 评论(0) 推荐(0)
摘要:本篇介绍angular中如何通过判断url的hash值来显示不同的视图模板,并使用不同的控制器: 下面,通过一个例子,来一步一步说明它的用法: 我们要做一个邮箱应用,打开的时候显示的是邮件列表: 然后点击邮件主题,可以查看该邮件的详细内容: 点击返回列表,再回到列表页 一. 创建index页面: 这 阅读全文
posted @ 2017-07-19 15:26 铭绘 阅读(795) 评论(0) 推荐(0)
摘要:本篇主要介绍angular自定义的过滤器: 直接看例子: 1. 首先要创建一个模块: MyFilter 2. 给模块添加一个过滤器: titleCase 创建过滤器的格式如下: .filter的第一个参数为过滤器的名字,也就是在{{}}里面使用的名字,第二个参数是一个函数,函数需要再返回一个函数,被 阅读全文
posted @ 2017-07-19 15:14 铭绘 阅读(204) 评论(0) 推荐(0)
摘要:什么是 '服务' 呢? 看一下下面这个例子: 比如一个购物车的应用: 那么,如果我在其它的控制器里也需要同样的一组数据,那么,我还得在另外的控制器里写一遍一样的代码,用于获取这组数据, 这样不利于维护修改,因此,我们就可以把 '获取这一段数据' 这个功能给封装成一个 '服务' , 这样就可以在多个不 阅读全文
posted @ 2017-07-19 14:41 铭绘 阅读(318) 评论(0) 推荐(0)
摘要:下面来看一个$watch的比较复杂的例子: 购物车例子, 给它添加一个计算总价和折扣的功能,如果总价超过500,则优惠10%: 代码如下: 把需要计算的三个数据: 总价,折扣,现价,放在一个bill对象中, 监测商品列表items数组的变化,设置$watch的第三个参数为true,这样,商品的数据一 阅读全文
posted @ 2017-07-19 14:32 铭绘 阅读(190) 评论(0) 推荐(0)
摘要:$watch是所有控制器的$scope中内置的方法: $scope.$watch(watchObj,watchCallback,ifDeep) watchObj: 需要被检测的对象,可以是以下任意一种: 1. 某个数据,监测这个数据的值是否发生变化 2. 一条angular表达式,监测表达式的结果是 阅读全文
posted @ 2017-07-19 14:31 铭绘 阅读(256) 评论(0) 推荐(0)
摘要:再来看一个选择li列表的例子: 点击li中的任意项,被点击的li高亮显示: 阅读全文
posted @ 2017-07-19 14:00 铭绘 阅读(1725) 评论(0) 推荐(0)
摘要:angular.js有一个很强大的指令: ng-select 它可以帮助你通过数据模型来创建select元素.它很好的支持了select标签的语法,但是却有点坑. 假设有如下一段json数据: { "myOptions": [ { "id": 106, "group": "Group 1", "la 阅读全文
posted @ 2017-07-18 18:09 铭绘 阅读(401) 评论(0) 推荐(0)
摘要:angular.js的$timeout指令对window.setTimeout做了一个封装,它的返回值是一个promise对象.当定义的时间到了以后,这个promise对象就会被resolve,回调函数就会被执行. 如果需要取消一个timeout,调用$timeout.cancel(promise) 阅读全文
posted @ 2017-07-18 18:07 铭绘 阅读(7036) 评论(0) 推荐(0)
摘要:$state.includes 方法用于判断当前激活状态是否是指定的状态或者是指定状态的子状态. $state.includes(stateOrName,params,options) $state.includes方法接受三个参数,其中第二和第三个都不知道是干啥的...估计也不太用得到,就暂时不管 阅读全文
posted @ 2017-07-18 17:31 铭绘 阅读(302) 评论(0) 推荐(0)
摘要:关于如何获取input框、textarea等的焦点,网上有许多文章都只是会跟你说ng-focus这个内置指令。像这种解答,只能说明作者并为真正理解人家的需求。ng-focus是一个事件,跟原生JS(JavaScript)的onfocus是一样的,当我们点击input框时,就会触发该事件,而在该事件里 阅读全文
posted @ 2017-07-17 15:53 铭绘 阅读(1493) 评论(0) 推荐(0)
摘要:除了 AngularJS 内置的指令外,我们还可以创建自定义指令。 通过 .directive() 函数来添加自定义的指令。 调用自定义指令时,需要在HTMl 元素上添加自定义指令名。 自定义指令命名规则:使用驼峰命名法来命名,即除第一个单词外的首字母需大写。如: myDirective。 在htm 阅读全文
posted @ 2017-07-17 15:13 铭绘 阅读(438) 评论(0) 推荐(0)
摘要:3种创建自定义服务的方式。 Factory Service Provider 大家应该知道,AngularJS是后台人员在工作之余发明的,他主要应用了后台早就存在的分层思想。所以我们得了解下分层的作用,如果你是前端人员不了解什么是分层,那么你最好问问你后台的小伙伴。 dao层:就是Model层,在后 阅读全文
posted @ 2017-07-17 14:58 铭绘 阅读(479) 评论(0) 推荐(0)
摘要:1.AngularJS 事件指令 (1)ng-click 鼠标点击事件 [html] <button ng-click="count = count + 1" ng-init="count=0"> Increment </button> <span> count: {{count}} </span> 阅读全文
posted @ 2017-07-17 14:45 铭绘 阅读(470) 评论(0) 推荐(0)
摘要:1. AngularJS 工具方法,参考angularjs API https://docs.angularjs.org/api官方文档 (1)angular.isArray(value) 判断是否是数组,返回true/false [html] view plain copy <div ng-con 阅读全文
posted @ 2017-07-17 14:34 铭绘 阅读(4315) 评论(0) 推荐(0)
摘要:1. AngularJS $scope 里面的$apply 方法 (1)$apply 方法作用: Scope 提供$apply 方法传播 Model 的变化 。 (2)$apply 方法使用情景: angularjs 外部的控制器(DOM 事件、外部的回调函数如 jQuery UI 空间等)调用了 阅读全文
posted @ 2017-07-17 14:24 铭绘 阅读(386) 评论(0) 推荐(0)
摘要:AngularJS中的run方法初始化全局数据,只对全局作用域起作用,如$rootScope.多个控制器之间可以共享数据,如下代码所示: [html] <script type="text/javascript"> var m1 = angular.module('myApp',[]); m1.ru 阅读全文
posted @ 2017-07-17 11:57 铭绘 阅读(794) 评论(0) 推荐(0)