使用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的作用域之间的通信传值
下面是子域之间的传值，不能直接传值，需要通过父域
//子域1routeApp.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); });});//子域2routeApp.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
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 : {}, });}])