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

}])