我的使用angular的一些小總結

使用angular作一個項目，卻又不是徹底使用的，不過也算用過了angular，裏面一些常見問題，在此總結下

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

一、但願$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'  
 }  
});

二、angular與fastclick

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

三、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");
 });
});

四、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;}

五、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

六、對於有些公用的地方，又不肯意寫controller的，可使用$rootScope，做爲全局的，在任何controller中均可以使用

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

七、對於有些操做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 就不會報錯

八、最後加上一個刪除某一項的代碼

 

$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;
            }
         }); 

 九、對於使用grunt壓縮混淆angular的代碼報錯的問題

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

經實驗，本來寫的這種模式

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

})

改爲

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

}])

 十、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>便可

十一、有時咱們須要在頁面中輸出含有 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 : {},
    });

}])