博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
用angularjs遇到的坑们
阅读量:4973 次
发布时间:2019-06-12

本文共 2089 字,大约阅读时间需要 6 分钟。

最近在用angularjs做一些东西,由于学艺不精,对angularjs了解不够,导致经常会不小心掉进一些自己挖的坑里(⊙_⊙),在这里记下来,谨防又踩。

1、angularjs ng-show not working

在页面中用到了pagination 分页插件

 

。就想说总的条目数bigTotalItems为0的时候就不显示插件了,ng-show="!!bigTotalItems"。结果ng-show怎么都不起作用。但是如果直接写ng-show="!!0" 、ng-show="!!80"又是有效的。。。。

然后我又想换一种写法,在controller里面写个方法。

$scope.isShow = function{    return  !!$scope.bigTotalItems;};

还是没效果,这个时候有点明白了,是scope的问题。于是换一种写法再试一下:

果然这个时候就可以了。

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,这里有篇文章写得很详细。

 

2、scope.$apply

遇到了一个数据双向绑定失效的问题,就是明明在controller里面给$scope.×××赋值了,在页面上愣是没有update数据。

一开始还不知道是啥原因,然后上网找解决办法的时候看到说在后面加一句$scope.$apply()就行了,试了一下真的可以,这才发现有$scope.$apply()这个东西。

但是为什么加了$scope.$apply()就可以了?什么时候要用到$scope.$apply()?

上网搜了一下看到这篇文章,解决了我的疑问

$scope.$apply的作用的用来手动通知页面update绑定的数据的。

一般情况下是不需要我们手动添加这一句代码的,因为angularjs本身在需要的时候调用,以达到我们所看到的数据双向绑定的效果。

但是因为我用了一个外部插件uploadify,然后在回调函数那里更新我controller的数据$scope.hasUpload = !$scope.hasUpload.....

因为外部插件本身已经脱离了angularjs的作用域,所以数据双向绑定在这里没有效果,只能手动添加$scope.$apply()来通知页面update数据。

 这篇文章讲的要详细,专业好多,可以帮助我们理解到scope.$apply,还有angularjs数据双向绑定的原理。。。

 

3、js按需加载

之前做应用的时候都会在首页就把全站的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;  }}

 

 

转载于:https://www.cnblogs.com/zhrj000/p/3383898.html

你可能感兴趣的文章
highcharts 图表实例
查看>>
ubuntu下如何查看用户登录及系统授权相关信息
查看>>
秋季学期学习总结
查看>>
SpringBoot 优化内嵌的Tomcat
查看>>
【LaTeX】E喵的LaTeX新手入门教程(1)准备篇
查看>>
highcharts曲线图
查看>>
extjs动态改变样式
查看>>
PL/SQL Developer 查询的数据有乱码或者where 字段名=字段值 查不出来数据
查看>>
宏定义
查看>>
笔记:git基本操作
查看>>
生成php所需要的APNS Service pem证书的步骤
查看>>
JavaWeb之JSON
查看>>
HOT SUMMER 每天都是不一样,积极的去感受生活 C#关闭IE相应的窗口 .
查看>>
windows平台上编译mongdb-cxx-driver
查看>>
optionMenu-普通菜单使用
查看>>
2016-2017-2点集拓扑作业[本科生上课时]讲解视频
查看>>
【MemSQL Start[c]UP 3.0 - Round 1 C】 Pie Rules
查看>>
Ognl中“%”、“#”、“$”详解
查看>>
我对应用软件——美团的看法
查看>>
执行了的程序,才是你的程序.
查看>>