用angularjs遇到的坑们
最近在用angularjs做一些东西,由于学艺不精,对angularjs了解不够,导致经常会不小心掉进一些自己挖的坑里(⊙_⊙),在这里记下来,谨防又踩。
1、angularjs ng-show not working
在页面中用到了pagination 分页插件
<pagination total-items="bigTotalItems" page="bigCurrentPage" max-size="maxSize" class="pagination-small" boundary-links="true"></pagination>
。就想说总的条目数bigTotalItems为0的时候就不显示插件了,ng-show="!!bigTotalItems"。结果ng-show怎么都不起作用。但是如果直接写ng-show="!!0" 、ng-show="!!80"又是有效的。。。。
然后我又想换一种写法,在controller里面写个方法。
$scope.isShow = function{
return !!$scope.bigTotalItems;
};
<pagination ng-show="isShow()" total-items="bigTotalItems" page="bigCurrentPage" max-size="maxSize" class="pagination-small" boundary-links="true"></pagination>
还是没效果,这个时候有点明白了,是scope的问题。于是换一种写法再试一下:
<div ng-show="!!bigTotalItems">
<pagination total-items="bigTotalItems" page="bigCurrentPage" max-size="maxSize" class="pagination-small" boundary-links="true"></pagination>
</div>
果然这个时候就可以了。
pagination指令编写的时候
.directive('pagination', ['$parse', 'paginationConfig', function($parse, config) {
return {
restrict: 'EA',
scope: {
page: '=',
totalItems: '=',
onSelectPage:' &'
},
controller: 'PaginationController',
......
scope的设置为 {},, 这时 directive 创建一个独立的 scope,没有原型继承,directive 不会不小心读写父 scope。
所以当我把ng-show="!!bigTotalItems"写在指令pagination里的时候,pagination已经拥有了一个独立的scope,是无法读到父scope里面的bigTotalItems的了。
关于angularjs的scope,这里有篇文章写得很详细深入理解 AngularJS 的 Scope。
2、scope.$apply
遇到了一个数据双向绑定失效的问题,就是明明在controller里面给$scope.×××赋值了,在页面上愣是没有update数据。
一开始还不知道是啥原因,然后上网找解决办法的时候看到说在后面加一句$scope.$apply()就行了,试了一下真的可以,这才发现有$scope.$apply()这个东西。
但是为什么加了$scope.$apply()就可以了?什么时候要用到$scope.$apply()?
上网搜了一下看到这篇文章,解决了我的疑问AngularJS and scope.$apply
$scope.$apply的作用的用来手动通知页面update绑定的数据的。
一般情况下是不需要我们手动添加这一句代码的,因为angularjs本身在需要的时候调用,以达到我们所看到的数据双向绑定的效果。
但是因为我用了一个外部插件uploadify,然后在回调函数那里更新我controller的数据$scope.hasUpload = !$scope.hasUpload.....
因为外部插件本身已经脱离了angularjs的作用域,所以数据双向绑定在这里没有效果,只能手动添加$scope.$apply()来通知页面update数据。
AngularJS and scope.$apply 这篇文章讲的要详细,专业好多,可以帮助我们理解到scope.$apply,还有angularjs数据双向绑定的原理。。。
3、js按需加载
之前做应用的时候都会在首页就把全站的js预先加载进来。。。
怎么实现按需加载,在德问上看到一个方案用AngularJS构建单页应用,怎样根据需求加载JS文件?
搬到这里来:
首先在$routeProvider里面加resolve属性,
$routeProvider.
when('/phones', {
templateUrl: 'partials/phone-list.html',
controller: PhoneListCtrl,
resolve: PhoneListCtrl.resolve})
然后
function PhoneListCtrl($scope) {
//本身不用管,该怎么弄怎么弄
} PhoneListCtrl.resolve = {
delay: function($q) {
var delay = $q.defer(),
load = function(){
$.getScript('/js/xxxxx.js',function(){
delay.resolve();
});
};
load();
return delay.promise;
}
}
用angularjs遇到的坑们的更多相关文章
- angularJS遇到的坑
最近在用angularjs做一些东西,由于学艺不精,对angularjs了解不够,导致经常会不小心掉进一些自己挖的坑里(⊙_⊙),在这里记下来,谨防又踩. 1.angularjs ng-show no ...
- windows下Meteor+AngularJS开发的坑
有复杂的地方我再开贴记录,这里只记录容易解决的坑. 1. windows下手工增加smart package.直接将下载下来的包扔到meteor package中.记得将文件夹名字改得和smart.j ...
- angularjs的一些坑关于 $sec
今天遇到$sec的问题 app.filter('to_trusted', ['$sce', function ($sce) { return function (text) { return $sce ...
- AngularJS 的一些坑
UI的闪烁 Angular的自动数据绑定功能是亮点,然而,他的另一面是:在Angular初始化之前,页面中可能会给用户呈现出没有解析的表达式.当DOM准备就绪,Angular计算并替换相应的值.这样就 ...
- angularjs select一些坑
用select下拉框时,很容易出现第一个默认选择框是空白的情况. 就像这样: 平常我们可以在options中设置selected属性达到默认选择的目的. 同样的,我们可以在控制器中写入select的初 ...
- angularjs中的坑
ng-show 等ng的指令中不需要使用{{parameter}}来取值,回无效
- vue.js源码精析
MVVM大比拼之vue.js源码精析 VUE 源码分析 简介 Vue 是 MVVM 框架中的新贵,如果我没记错的话作者应该毕业不久,现在在google.vue 如作者自己所说,在api设计上受到了很多 ...
- select ng-change 方法中 拿不到 ng-modal 定义的变量值
在使用angularjs框架的项目中,select 的数据源有两种绑定方式,在option中使用ng-repeat循环绑定,或者在select中使用ng-option 绑定. 无论哪种绑定方式,均要使 ...
- 那些年,在AngularJS的路上遇到的坑
使用AngularJS这么久以来,遇到过一些坑,之前一直没有以书面的形式整理下,现在好好总结下,以供后面查备. 一.angular scope 在ng-if与ng-show下的区别(两者作用域的差别) ...
随机推荐
- NET调用Java之100-Continue的坑
场景:这段时间开发的时候遇到了需要NET调用java的restful api的情况,java端用的服务器是tomcat,框架是spring boot,net调用java端的接口之后只要java端的接口 ...
- AudioServicesPlaySystemSound音频服务—备用
对于简单的.无混音音频,AVAudio ToolBox框架提供了一个简单的C语言风格的音频服务.你可以使用AudioservicesPlaySystemSound函数来播放简单的声音.要遵守以下几个规 ...
- 转:enum与typedef enum的用法
来自:http://blog.sina.com.cn/s/blog_817a5eb6010146ad.html 作者:于超峰 在程序中,可能需要为某些整数定义一个别名,我们可以利用预处理指令#defi ...
- monogdb笔记1
:db.collection.remove()与db.collection.drop()的比较 插入100万条测试数据 ;i<;i++){ db.tester.insert({-i}) } 进行 ...
- 完整的开发一个ContentProvider步骤
1.定义自己的ContentProvider类,该类需要继承Android提供的ContentProvider基类.2.向Android系统注册这个"网站",也就是在Android ...
- MFC界面更新实现方法
1.更新窗口 即采用UpdateWindow()函数立即发送WM_PAINT消息更新整个窗口. void CEditTestDlg::OnBnClickedBtnSysUpdate() { CStri ...
- velocity序列动画
结合上次提到的velocity的UI Pack存在一下问题: 动画名称过长,语意性差 使用UI Pack的动画,loop属性会失效 无法监听动画完成时机 我这里想到了一种解决 ...
- MsgBox-官方文档
http://s3.envato.com/files/293712/index.html
- Java 将自己定义的对象作为HashMap的key
须要继承Map的equals函数和hashCode函数 package com.category; import java.util.HashMap; public class GenCategory ...
- openflow tutorial 开始openflow的学习(一)
首先不废话介绍openflow了,自己也还搞不清楚究竟是个什么玩意儿,概括不出什么内容来,先做试验,有个大体的感性了解回来再总结吧. 第一步,搭建环境,这一步就是安装工具,不同的系统环境搭建不一致,我 ...