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

}])