zoukankan      html  css  js  c++  java
  • 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;
      }
    }
    复制代码
  • 相关阅读:
    Docker 给 故障停掉的 container 增加 restart 参数
    使用docker化的nginx 反向代理 docker化的GSCloud 的方法
    apache benchmark 的简单安装与测试
    mysql5.7 的 user表的密码字段从 password 变成了 authentication_string
    Windows 机器上面同时安装mysql5.6 和 mysql5.7 的方法
    python4delphi 安装
    见证下神奇的时刻
    windows下面安装Python和pip终极教程
    python如何安装pip和easy_installer工具
    Tushare的安装
  • 原文地址:https://www.cnblogs.com/wennice/p/6524618.html
Copyright © 2011-2022 走看看