angular.js
文章平均质量分 88
zhifeng687
这个作者很懒,什么都没留下…
展开
-
angularJS constant和value
angularJS可以通过constant()和value()对于创建服务也是很重要的。它们的相同点是:都可以接受两个参数,name和value。区别:constant()可以将一个已经存在的变量值注册为服务,并将其注入到应用的其他部分中。其中,name为注册的常量的名字,value为注册的常量的值或对象。举例:value为值时:angular.module转载 2016-11-14 09:59:36 · 796 阅读 · 0 评论 -
ng-repeat设置第一个元素为默认样式,点击其余元素切换样式
提供一个简单思路:JS:$scope.isActive = 0;$scope.arr = [ { //code here }, { //code here }];$scope.selectItem = function (index) { item.isActive = index;}HTML:转载 2017-09-20 23:30:19 · 2618 阅读 · 0 评论 -
angular里的filter过滤数据传参
在ng-repeat中使用过滤器filter ,则在filter闭包内第一个参数,就是ng-repeat中的原数组,其余参数可以在-repeat表达式中,使用filterName :param1 :param2 提供。如果参数是$scope中的变量 , 直接写上去即可,不用加引号转载 2017-09-27 10:34:50 · 7470 阅读 · 0 评论 -
ng-bind及ng-cloak解决AngularJs页面加载闪屏问题
如果把js文件放在head头部,这时用户网络不好或者是js文件太大一时加载不完,就会出现页面混乱的局面。所以,一般情况下,我们是把js文件放在html页面的底部,等html和css加载完成之后再来执行js代码,但是在body体中要从Angular中获取数据,否则,网络一卡,用户会看到两个花括号{{]},而没有任何数据,这种想象称为“闪屏”,下面是具体的解决方法:使用ng-cloak指令,先把页面隐藏,等angular代码加载完成之后,再把html代码显示出来:转载 2017-09-27 11:27:01 · 848 阅读 · 0 评论 -
angular.config
在angular中什么情况下用configAngularJS模块可以在被加载和执行之前对模块自身进行配置。当你需要在AngularJS模块加载之前进行配置,就要用到config。只有提供者(Provider)和常量(constant)才能注入到config中。使用情形:定义路由信息:var app = angular.module('myApp', [ngRoute]);转载 2017-10-10 14:56:46 · 7140 阅读 · 0 评论 -
angular.injector
描述:创建一个injector对象, 调用injector对象的方法可以获得angular的service, 或者用来做依赖注入. 使用方法:angular.injector(modules, [strictDi]) 参数详解:Param Type DetailsmodulesArray.一组module或转载 2017-10-10 15:24:52 · 3008 阅读 · 0 评论 -
angular中的$controller服务
大家一般用angular的$controller的时候都是用如下的方式:angular.module('app',[]) .controller('appController',function{})这样的方式是让angular自动去寻找程序的入口ng-app,然后自动解析依赖注入,并且声成实例。其实在angular内部执行过程如下//使用注射器加载应用var injec转载 2017-10-10 11:55:57 · 3658 阅读 · 0 评论 -
Angular $http拦截器计算请求耗时
$http service在Angular中用于简化与后台的交互过程,其本质上使用XMLHttpRequest或JSONP进行与后台的数据交互。在与后台的交互过程中,可能会对每条请求发送到Server之前进行预处理(如加入token),或者是在Server返回数据到达客户端还未被处理之前进行预处理(如将非JSON格式数据进行转换);当然还有可能对在请求和响应过程过发生的问题进行捕获处理。所有这些需转载 2017-10-10 15:40:41 · 862 阅读 · 0 评论 -
在angular外获取控制器依赖的服务
在angular外获取依赖服务var injector1 = angular.element($("#selectCtrl")).injector(); //在angular外获取依赖服务 var $http = injector1.get('$http'); var $timeout = injector1.get('$timeout');原创 2017-10-10 15:48:33 · 696 阅读 · 0 评论 -
AngularJs module模块简介
在AngularJs中,模块是定义应用的最主要方式。模块包含了主要的应用代码。一个应用可以包含多个模块,每个模块都包含了定义具体功能的代码。使用模块能给我们带来许多好处,比如:1.保持全局命名空间的清洁;2.编写测试代码更容易,并能保持其清洁,以便更容易找到相互隔离的功能;3.易于在不同应用间复用代码;4.使应用能够以任意顺序加载代码的各个部分。转载 2016-10-28 10:35:11 · 984 阅读 · 0 评论 -
angular directive详解之replace
replace属性为true时,会替换directive指向的元素;为false时将directive的内容作为子元素插入到directive指向的元素。默认为false。转载 2017-07-23 22:00:46 · 613 阅读 · 0 评论 -
angualar.js指令与控制器间的通信(@、=、&)以及在指令内部使用$watch监听参数变化
$scopes上的对象是与html上指令标签的数据模型绑定的,即父控制器上$scope的对象不能直接传给子指令的link函数,被子指令的$scope引用。数据的流向应该是:父控制器上$scope的对象绑定html上指令标签的数据模型,该数据模型作为子指令的属性值,然后传给子指令的scope与之绑定。其它要注意的还有:html上指令标签的属性名不能有大写。如果指令上的scope的属性值有大写,则对应html上指令标签的属性名必须有-符号。原创 2017-07-30 23:20:30 · 1132 阅读 · 0 评论 -
angular下拉框模糊查询
获取的数据值与下拉选逐个比较,如果包含则放在临时变量副本,并用临时变量副本替换下拉选原先的数值,如果数据为空或找不到,就用初始下拉选项副本替换转载 2017-09-14 17:56:04 · 4210 阅读 · 0 评论 -
Angular的Directive,以及copmile和link方法
compile阶段:compile阶段主要是对模板内容的处理,可以对模板内容进行修改,如ng-repeat就是在compile阶段执行的。link阶段:link阶段主要对模板进行数据绑定和事件绑定等操作。在Directive中compile和link函数不能同时出现,如果定义了compile函数,则会忽略link函数。如果compile后要对数据进行绑定事件,则compile的返回值就定义为link函数。在link阶段,会调用compile的返回值作为link函数。转载 2016-10-21 18:03:28 · 386 阅读 · 0 评论 -
AngularJS双向数据绑定的源码分析
所谓双向数据绑定,概念上为数据模型到视图的绑定,以及视图到数据模型的绑定。容易理解的说法就是从界面的操作能实时反映到数据,数据的变更能实时展现到界面。目前对于双向数据绑定的实现有这么几种流派脏值检测,例如AngularJSGetter/Setter,例如Vue.js对于Getter/Setter实现的数据双向绑定来说,核心在于重定义model的getter与setter方法,在数据变动的时候重新渲...转载 2017-02-13 23:48:49 · 399 阅读 · 0 评论 -
angular $watch的使用
在$apply方法中提到过脏检查,首先apply方法会触发evel方法,当evel方法解析成功后,会去触发digest方法,digest方法会触发watch方法。(1)$watch简介在digest执行时,如果watch观察的的value与上一次执行时不一样时,就会被触发。AngularJS内部的watch实现了页面随model的及时更新。$watch方法在用的时候主要是手动的监听一个对象,但对象...转载 2017-06-26 18:39:30 · 2007 阅读 · 0 评论 -
angular自定义服务factory和service源码解析
控制器膨胀控制器是AngularJS的肉和土豆,一不小心就会将过多的逻辑加入其中,尤其是刚开始的时候。控制器永远都不应该去操作DOM,或是持有DOM选择器,那是我们需要使用指令和ng-model的地方。同样的,业务逻辑应该存在于服务中,而非控制器。数据也应该存储在服务中,除非它们已经被绑定在$scope上了。服务本身是单例的,在应用程序的整个生命周期都存在,然而控制器在应用程序的各状态间是瞬态的。...转载 2016-11-13 13:29:37 · 779 阅读 · 0 评论 -
AngularJS点击添加样式
首先解释需求是这样的,有个列表,当你点击哪一行时,哪一行背景变成灰色,在JQ中,大家都知道,这是非常容易的,加一个addClass就行了,那么AngularJS如何实现呢?下面我们看代码部分html ng-app="a2_11">head> title>添加元素样式title> script src="../Script/angular.min.js"转载 2017-09-20 23:33:29 · 2066 阅读 · 0 评论 -
ng-class切换样式
当flag1为true 则class="class1"若flag2也为true 则class="class1 class2"引自:ng-class切换样式转载 2017-09-20 23:38:57 · 1191 阅读 · 0 评论 -
angular指令监听ng-repeat渲染完成
在ng-repeat模板实例内部会暴露出一些特殊属性$index/$first/$middle/$last/$odd/$even,$index会随着每次遍历(从0开始)递增,当遍历到最后一个时,$last的值为true,所以可以通过判断$last的值来监听ng-repeat的执行状态转载 2017-09-09 11:23:59 · 809 阅读 · 1 评论 -
angularjs源码分析之:angularjs执行流程
angularjs源码分析之:angularjs执行流程先上个大图,有个大概印象,注:angularjs的版本为:1.2.1,通过bower install angularjs安装的。几个重要方法bindJQuery();publishExternalAPI(angular);jqLite(document).ready(function() { ang转载 2017-07-09 20:46:54 · 506 阅读 · 0 评论 -
详解AngularJS脏检查机制及$timeout的妙用
浏览器事件循环和Angular的MVW“脏检查”是Angular中的核心机制之一,它是实现双向绑定、MVVM模式的重要基础。Angular将双向绑定转换为一堆watch表达式,然后递归检查这些watch表达式的结果是否变了,如果变了,则执行相应的watcher函数。等到Model的值不再变化,也就不会再有watcher函数被触发,一个完整的digest循环就结束了。因为我们不需要改变编程思维,就能...转载 2016-11-15 23:52:49 · 810 阅读 · 0 评论 -
angular的父子controller通信
angularjs的事件 $broadcast and $emit and $onEvent 事件事件是解耦良器,angularjs提供了很方便的事件机构。 发送事件可以用 $scope.$emit('name', 'args');或者是 $scope.$broadcast('name', 'args');要了解两者的差别转载 2017-07-23 00:06:42 · 771 阅读 · 0 评论 -
angular的同级controller通信
在controller间分享数据Blood 血腥的方法每个controller都有自己的scope, 同时也可以共享他们老爸的scope内的数据。如果我们想让两个controller共享数据的话, 有多种方法。 最直接血腥的就是在他们老爸的scope里定义一个model。input type="text" ng-model="person.name"/> div n转载 2017-07-23 00:13:40 · 819 阅读 · 0 评论 -
ng-bind、ng-value和ng-model
在html页面中定义angular的赋值表达式,要么用ng-value,要么用ng-bind,要要么用ng-init使用ng-init、ng-bind、ng-value、ng-model指令都可以生成数据模型,即如果 scope 中不存在变量, 将会创建它。ng-init只能用于生成数据模型ng-bind、ng-value、ng-model指令既可以绑定已有的变量,也可以生成数据模型,即如果 sc...原创 2017-07-23 01:07:28 · 3733 阅读 · 0 评论 -
angular自定义指令使用$compile动态生成html
标签:angular.module(‘app‘) .directive(‘compile‘, function ($compile) { return function (scope, element, attrs) { scope.$watch( function (scope) {转载 2017-07-23 01:15:30 · 2000 阅读 · 0 评论 -
深入浅出AngularJs中的Service
Angular中有几种不同类型的services。每一种都有自己的独特用法。需要记住的非常重要的一点是service总是一个单体,无论是哪种类型的service。注释:单体是一种设计模式,它限制了每一个类仅能够实例化为一个对象。无论我们在什么地方注入我们的service,将永远使用同一个实例。Constant例子:app.constant('fooCon转载 2017-07-23 10:53:29 · 312 阅读 · 0 评论 -
Angular中$compile源码分析
$compile,在Angular中即“编译”服务,它涉及到Angular应用的“编译”和“链接”两个阶段,根据从DOM树遍历Angular的根节点(ng-app)和已构造完毕的 \$rootScope对象,依次解析根节点后代,根据多种条件查找指令,并完成每个指令相关的操作(如指令的作用域,控制器绑定以及transclude等),最终返回每个指令的链接函数,并将所有指令的链接函数合成为一个处理后的链接函数,返回给Angluar的bootstrap模块,最终启动整个应用程序。转载 2017-07-23 20:24:56 · 454 阅读 · 0 评论 -
angularJs三种依赖注入方式与minify
依赖注入(饭来伸手,一来张口)DI,Dependency InjectioAngularJs使用module“名字/对象”注册表来作为容器,实现DI。依赖注解有三种方式,(数组标注、添加$inject属性、隐式声明)。其中前两种在代码minify时不会被破坏,推荐使用第一种方式。第二种方式可以自己手动改写(下面有例子),也可以使用工具ngAnnotate对隐式声明进转载 2017-07-23 22:38:56 · 439 阅读 · 0 评论 -
在Angular外部使用js调用Angular控制器中提供的函数方法或变量
Html代码如下所示: 1 DOCTYPE html> 2 html ng-app="myApp" id="myApp"> 3 head> 4 meta name="viewport" content="width=device-width" /> 5 title>Testtitle> 6 script src="~/Content/Js/P转载 2017-08-01 18:45:06 · 3761 阅读 · 0 评论 -
ng-options设置option的value属性
If you use the track by option, the value attribute is correctly written, e.g.:<div ng-init="a = [{label: 'one', value: 15}, {label: 'two', value: 20}]"> <select ng-model="foo" ng-options...原创 2017-07-24 16:21:30 · 6912 阅读 · 2 评论 -
angular的$http服务
Usage$http(config);ArgumentsconfigObject describing the request to be made and how it should be processed. The object has following properties:method – {string} – HTTP meth转载 2017-07-24 22:23:06 · 330 阅读 · 0 评论 -
angular-ui-grid merge cells in column(合并列上的单元格)
问题:I would like to pull a feature request that you implement a rowspan over 2 or more rows.This feature greatly help me improving my cell templates when I have a double lessons to prepare!It should be...原创 2017-07-25 00:12:45 · 5987 阅读 · 2 评论 -
注入器/injector
注入器/injector注入器是AngularJS框架实现和应用开发的关键,这是一个DI/IoC容器的实现。AngularJS将功能分成了不同类型的组件分别实现,这些组件有一个统称 - 供给者/provider, 下图中列出了AngularJS几个常用的内置服务:AngularJS的组件之间不可以互相直接调用,一个组件必须通过注入器才 可以调用另一个组件。这样的好处是组转载 2017-07-25 23:00:44 · 3578 阅读 · 0 评论 -
理解angular中的module和injector,即依赖注入
依赖注入(DI)的好处不再赘言,使用过spring框架的都知道。angularjs作为前台js框架,也提供了对DI的支持,这是javascript/jquery不具备的特性。angularjs中与DI相关有angular.module()、angular.injector()、 $injector、$provide。对于一个DI容器来说,必须具备3个要素:服务的注册、依赖关系的声明、对象的获取。比转载 2017-07-25 23:36:52 · 464 阅读 · 0 评论 -
angular制作下拉框联动
/* 1、了解下拉框联动应该制作的数据格式* 2、了解ng-options通过track by 设置option的value* 3、scope对象的属性selectList 代表数据格式中的整个数据,即一级业务数组* 3、ng-model的指令值“selected1”代表数据格式中的一级业务对象,即selectList中的一个对象;* 4、scope对象的属性subSelectList 代表数据格式中的二级业务数组,即sub属性值;* 5、ng-model的指令值“se原创 2016-04-12 00:00:13 · 1867 阅读 · 0 评论 -
自定义指令的require参数
require:参数可以被设置为字符串或数组,字符串代表另外一个指令的名字,require 会将控制器注入到其值所指定的指令中,并作为当前指令的链接函数的第四个参数。require 参数的值可以用下面的前缀进行修饰,这会改变查找控制器时的行为: ? 如果在当前指令中没有找到所需要的控制器,会将 null 作为传给 link 函数的第四个参数。如果添加了 ^ 前缀,指令会在上游的指令链中查找 req...转载 2016-11-15 14:53:59 · 1559 阅读 · 0 评论