AngularJS监听计数

大家都知道,AngularJS双向数据绑定很Cool。简单地说,Angular在scope模型上设置了一个监听队列,用来监听数据变化并更新view 。每次绑定一个东西到View上时AngularJS就会往$watch队列里插入一条$watch,用来检测它监听的model里是否有变化的东西。当浏览器接收到可以被Angular执行环境处理的事件时,就会触发$digest循环,遍历所有的$watch,model稳定后结束循环。大多数时候,浏览器速度很快这个过程不长,这不是一个大问题。但如果在很复杂的应用下使用不当会造成性能问题,比如说表格树组件中滥用双向数据绑定很容易造成界面很卡。 继续阅读“AngularJS监听计数”

使用navbar和ui-router动态加载外部模板

使用AngularJS material navbar(导航栏组件)可以动态加载外部模板吗?看了AngularJS material官网的Demo,觉得还是没有交行清楚,导航栏的数据也是写死的。当然这对入门知识点很有用,不过对于实际项目,帮助就不大了。首先导航栏应该基于数据驱动来渲染,而且点击导航项时应该从动态加载外部模板。基于此,我们对md-nav-bar进行了扩展。 继续阅读“使用navbar和ui-router动态加载外部模板”

自定义AngularJS Material模态框

AngularJS Material是Material Design设计方式使用AngularJS实现的,该项目提供了一套基于Material Design 系统设计的可重复使用的,易于测试的UI组件。它的layout使用的是flex来布局的,因此大家就知道了他的兼容性了,但是这个是未来的方向。和AngularJS UI Bootstrap相比,AngularJS Material组件更丰富,比如统一外观的Select(下拉框)、移动设备系统才有的Switch(开关)、Swipe(侧滑)、Bottom Sheet(底部弹出)等组件。AngularJS Material交互性更好、动感更强,更适合做响应式Web App。 继续阅读“自定义AngularJS Material模态框”

Angularjs指令怎样传递函数参数

曾经做过一个下钻表格,就是页面一进来显示所有年份的收入,点击某年时会下钻显示该年每个季度的收入,点击某个季度时会下钻显示该季度每个月的收入。可以点击查看效果https://codepen.io/riafan/pen/LdprZo。这里少不了回退显示,我们没有用路由来实现,而是使用的面包屑来导航。在表格单元格上点击时,会使用当前数据源的data属性去渲染下级时间段对应的表格,同时将对应的时间段路径推入数组作为渲染面包屑的数据源。当在面包屑上点击时间段路径时,会根据路径名去整个数据源中去搜索该时间段对应和数据,重新渲染表格。当然实际应用应该从后台动态获取数据的,而且查询参数很多时候跟显示字段一样。比如说{id: 1001, name: 2014; value: 35400},id参数能保证查询出来的值的唯一性,而name却不一定唯一。这里这了方便演示,用了一个列表数组。 继续阅读“Angularjs指令怎样传递函数参数”