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;
  }
}