个人使用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;
            }
         }); 

 9、对于使用grunt压缩混淆angular的代码报错的问题

http://www.mincoder.com/article/1891.shtml

经实验，原本写的这种模式

routeApp.controller('subcommentlistCtl', function($scope,$rootScope) {

})

改成

routeApp.controller('subcommentlistCtl', ['$scope', '$http', function ($scope, $http) {

}])

 10、templateurl使用   

http://www.cnblogs.com/haogj/p/3601528.html

restrict 的取值可以有三种：

• A 用于元素的 Attribute，这是默认值
• E 用于元素的名称
• C 用于 CSS 中的 class

routeApp.directive('allcomment', function() {  
    return {  
        restrict: 'E',
        templateUrl: topicapi.allcomment_url,
        replace:true,       //替换掉原本的标签元素
    }  
});

html里面写上<allcomment></allcomment>

这里使用有时会报错

Error: [$compile:tplrt] Template for directive 'allcomment' must have exactly one root element. 

这种情况是templateurl里面内容不是一个整体，在外面套上<div></div>即可

11、有时我们需要在页面中输出含有 html 标签的字符串，但标签在页面上却被 angularJs 自动转义了，在页面上 html 标签不生效。（标签会转义成字符串在页面上输出）

比如我们$scope.html = "<p>测试 </p>";    //页面输出 :“<p>测试 </p>”而不是“测试”

这里就需要使用 $sce 安全机制来输出 html

方法一，直接使用

routeApp.controller('subcommentlistCtl', ['$scope', '$http', '$sce',function ($scope, $http,$sce) {

}])

不过方法一有时遇到link这类使用的时候不好用，最好使用方法二，把它封装成一个过滤器就可以在模板上随时调用了

方法二，把它封装成一个过滤器就可以在模板上随时调用了

routApp.filter('to_trusted', ['$sce', function ($sce) {
    return function (text) {
        return $sce.trustAsHtml(text);
    };
}]);

使用时html

<p ng-bind-html="html | to_trusted"></p>

 13：angular的定时器  与缓存的简单使用

缓存需要引入js   

头部需要

var myApp = angular.module('myApp',['ngAnimate','ngStorage','ui.sortable','ng.ueditor','ui.router']);

详情查看链接http://ngmodules.org/modules/ngStorage

myApp.controller('mainCtr', ['$scope', '$sessionStorage','$timeout',function ($scope, $sessionStorage,$timeout) {
　　$timeout(function(){$scope.previewtip = false;},2000);  //此时$timeout相当于setTimeout
　　$scope.$storage = $sessionStorage.$default({
            showmagazineset : true,
            form : {},
    });

}])