使用angular的一些小总结

使用angular做一个项目，却又不是完全使用的，不过也算用过了angular，里面一些常见问题，在此总结下

var routeApp = angular.module(‘allApp‘,[‘ngAnimate‘]);

1、希望$http是post传值，在头部添加

routeApp.config(function($httpProvider){
 $httpProvider.defaults.transformRequest = function(data) {
        //使用jQuery的param方法把JSON数据转换成字符串形式
        return $.param(data);
   };
    $httpProvider.defaults.headers.post = {
      ‘Content-Type‘: ‘application/x-www-form-urlencoded‘
 }
});

2、angular与fastclick

routeApp.run(function() {
      FastClick.attach(document.body);
});

3、angular controller的作用域之间的通信传值

下面是子域之间的传值，不能直接传值，需要通过父域

//子域1
routeApp.controller(‘circleListCtl‘, function($scope, $http) {
    $scope.focusManager = function(id,$event){
        $scope.$emit("focusmanager", id);
    };
});
//父域
routeApp.controller(‘parentCtl‘, function($scope) {
  $scope.$on("focusmanager",function (event, id) {
  $scope.$broadcast("focusmanagerFromParent", id);
  });
});
//子域2
routeApp.controller(‘focusManagerCtl‘, function($scope) {
 $scope.$on("focusmanagerFromParent",function (event, id) {
       //$scope.focus_show = true;
       //api.getuserid(id,$scope,"manager");
 });
});

4、angular加载时会出现闪烁问题

A将原本 <span>{{count}}</span>  这个写法改成   <span ng-bind="count"></span>

个人觉得希望angular不闪烁只需要加一个  ng-cloak即可，ng-cloak需要添加样式

[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide{display:none !important;}ng\:form{display:block;}.ng-animate-start{clip:rect(0,auto,auto,0);-ms-zoom:1.0001;}.ng-animate-active{clip:rect(-1px,auto,auto,0);-ms-zoom:1;}

5、angular动画问题，如第一段代码，首先要加上angular-animate.js    头部引入ngAnimate

然后需要动画的地方加个类名，写上样式，这里以.repeated-item为例，是渐进渐出的样式，通常用在列表加载出来或者删除某一项时，就在要操作的元素上添加这个类名，样式如下：

.repeated-item{
  &.ng-enter, &.ng-move {
    -webkit-transition:0.5s linear all;
    -moz-transition:0.5s linear all;
    -o-transition:0.5s linear all;
    transition:0.5s linear all;
    opacity:0;
  }
  &.ng-enter.ng-enter-active,&.ng-move.ng-move-active {
      opacity:1;
  }
  &.ng-leave {
    -webkit-animation:0.5s my_animation;
    -moz-animation:0.5s my_animation;
    -o-animation:0.5s my_animation;
    animation:0.5s my_animation;
  }
}
@keyframes my_animation {
  from { opacity:1; }
  to { opacity:0; }
}
@-webkit-keyframes my_animation {
  from { opacity:1; }
  to { opacity:0; }
}

@-moz-keyframes my_animation {
  from { opacity:1; }
  to { opacity:0; }
}

@-o-keyframes my_animation {
  from { opacity:1; }
  to { opacity:0; }
}

我这个是常用，其他的没用到，有其他需要的可以在网上搜，用法差不多，就是ng-enter   ng-move这几个，附上链接一个

http://www.tuicool.com/articles/jEvY3a

6、对于有些公用的地方，又不愿意写controller的，可以使用$rootScope，作为全局的，在任何controller中都可以使用

routeApp.controller(‘parentCtl‘, function($scope,$rootScope) {
。。。。。。。。。。。。。
})

7、对于有些操作angular 的值不起作用的，可以添加 $apply

附上链接http://www.tuicool.com/articles/bAJVBvB

$scope.$apply(function(){                //添加列表
                    $scope.isowner = data.isowner;
                    if(typeof($scope.subtopics) != ‘undefined‘){
                        $scope.subtopics = arr.concat($scope.subtopics, data.subject_list);
                    }else{
                        $scope.subtopics = data.subject_list;
                    }
                });

这个$apply里面的方法是把请求后的json结果放在$scope数据上，很明显$scope.subtopics这会是一个循环的列表，循环很简单

ng-repeat="topic in subtopics track by $index"

对于有些二维数组，需要嵌套使用的，有时会报错，因为$index     需要在后面加上 track by $index 就不会报错

8、最后加上一个删除某一项的代码

$scope.programs = $.grep($scope.programs, function(x) {
    return x.id != item.id;
   }); //删除
   $scope.count -= 1;

等同
$scope.programs.forEach(function(v, i, _) {
            if (v.id == item.id) {
           $scope.programs.splice(i,1);
            $scope.count -= 1;
            }
         });