【經驗】AngularJS

1.關於ng-model

<textarea id="feature_name" class="col-sm-3" placeholder="軟件特徵" ng-model="data.dlls[$index]" ng-repeat="i in data.dlls track by $index"></textarea>

注意ng-model="data.dlls[$index]"，若是改爲ng-model="i"，雖然會成功將dlls裏的內容顯示在文本區中，可是當dlls.push新項時（就建立新的textarea），以前的textarea中顯示的內容將消失。
2.當directive被放置到控制器中時，在directive裏的ng表達式所引用的變量與直接寫在控制器的html中的變量無異。
3.每一次ng事件，都會檢查全部的值。ng-checked是最好的證實，若是一個input 被選中，而後去觸發其餘元素的ng事件，這個input上的ng-checked中綁定的事件處理函數也會被執行。
一樣的，$watch監聽着任何事件，只要觸發了任何事件，其中的函數都會被執行（不符合邏輯）。
4.$cookies.a 返回的是一個字符串，而$cookieStore.a返回的能夠是number或boolean
5.以前想要根據cookie判斷信息是否顯示過某段文本，文本形如

<p id="updateInfo" ng-if="updateInfo" update-info>

homeApp.controller('homeMainCtrl', ['$scope', '$timeout', '$cookieStore', function($scope, $timeout, $cookieStore){}]);
homeApp.directive('updateInfo',['$timeout', '$cookieStore', function($timeout, $cookieStore){
    return { 
        priority:599,//注意這個值
        link: function(scope,elem,attr){
            $cookieStore.put('updateInfoShowed',false);
            if($cookieStore.get('updateInfoShowed')){
                scope.updateInfo = false;
            }
            else {
                scope.updateInfo = true;
                $cookieStore.put('updateInfoShowed',true);
                $timeout(function(){
                    elem.slideToggle();
                },8000);
            }
            console.log(document.getElementById('updateInfo'))//注意這個console
        }
    };
}]);

 

當priority:599時，根本沒有執行console。
猜想：是由於ng-if的指令優先度較高，執行我這條指令時，p元素已經被ng-if指令移出出dom或者設置dispaly:none了，因此沒有執行link中的代碼。
例證1：把ng-if改成ng-show，console出p的dom。
例證2：當priority:600時，console結果爲null，也就是說提升了優先度console就被執行了。

例證2輸出null意味着在本指令的link函數執行時元素不存在dom中。而例證1說明在本指令的link函數執行時dom已經存在。
那麼，例證2中元素之因此不存在，緣由可能有2：
(1)是否由於ng-if？難道ng-if的優先度比600要大？
若是是這樣，那麼599與600間的分界是什麼致使的？
(2)仍是由於ng-if，而ng-if的優先度確實是599。
在這種假設下，另外一種可能性是ng-if在compile期作過些什麼。

6.alert會阻塞線程，因此要使用setTimeout(function(){alert()},0)
7.jQuery.ajax({url:"/a.html",type:"GET"})和jQuery.get("/a.html")有區別，前者彷佛會被angularjs認爲是對文件的訪問，後者會被ng進行路由處理。
8.重載視圖使用 $route.reload();
9.在directive裏elem.on('click',function(){scope.day = 'yesterday'})，這是想改變scope的day，但會致使controller中的$scope.$watch失效，view裏也不會更新（即便是在directive所在元素內）。
這種時候要寫成

yesterday.on('click', function(){
    scope.$apply(function(){
        scope.day = 'yesterday';
    })
});

10.ng-cloak閃爍問題。寫.ng-hide{display:none}，而後在元素中添加.ng-hide
11.template文件中的html，應該保持其獨立性，好比：
<div ng-template></div>
template.html:
<ul><li></li></ul>
當然這樣寫也能夠：
<ul ng-template></ul>
template.html:
<li></li>
可是template.html就缺少了獨立性，它被限定了必須被一個ul所包括。
12.ng-class使用{xx:xx}[data-list-row]是無效的，只能換用駝峯寫法。
13.ng-if會銷燬dom，重現加載時會重載dom以及指令，恐怕做用域也會重載。可是ng-if所在的元素，其template不會被重載
14.子元素$emit，父元素$broadcast給那個子元素的兄弟元素，這能夠，可是要注意事件的名稱不能一致。
15.$location.search()能夠獲取?後的鍵值對
16.有混合ng的src與href必定要使用ng-src和ng-href。否則，前者會在某些瀏覽器上致使跳轉到404頁面。
17.$anchorScroll會根據hash跳轉，但修改hash會致使頁面刷新，要這麼寫：

var old = $location.hash()
$location.hash(id);
$anchorScroll();
$location.hash(old)

18.ng-change會根據ng-pattern決定是否觸發。要每次按鍵觸發使用ng-press
19.ng-style="{true: {'color': 'red'}}[true]"
20.$timeout在做用域on('$destory')時必定要銷燬
21.ng-bind="010203"會顯示10203，多是進制問題
22.使用ng-if在指令或者指令的父元素上時，可能會致使ng-if這個指令先於自定義指令被執行，致使自定義指令執行時找不到dom而無效。
23.我曾在指令內試圖將使用了ng-model="formData.password"綁定數據的formData傳給服務器，但結果formData爲undefined。解決辦法是在指令link里加scope.formData = {};原理未知。
24.給指令設置scope:{}可能會致使其中的子元素上的指令失效
25.ng的$resource服務若無寫getGroup: {url: '/client/group/index', method: 'GET', responseType: 'arraybuffer'}這裏的responseType，會默認返回的是json做處理，若是不是json會報錯如：
Error: [$resource:badcfg] http://errors.angularjs.org/1.2.26/$resource/badcfg?p0=object&p1=array
25.1 其實應該寫isArray: true
26.不能在$resource裏刷時間戳，如：
 clientDetail: {params: {m: 'eqdetail', t: (new Date).getTime()}, method: 'GET'} 
這樣會致使全部時間戳都固定爲同一個數字，必須寫成
 softwareService.clientDetail({uuid: client.uuid, t: (new Date).getTime()}) 
27.指令中使用replace:true時，要保證模板被包括在一個容器中，
<input /><p></p>——這樣是不行的，會報錯如：Error: [$compile:tplrt] Template for directive 'rewardPoint' must have exactly one root element. /js/apps/main/tpl/rewardPoint.html
<div><input /><p></p></div>——必須如此加個div包括，其實這樣我何苦使用replace:true
28.ng-href="{{ down({fileType: 'csv'}) }}" ng-href中使用函數必定要在最外面用大括號括起來，其實在html裏使用ng表達式寫函數都得這麼幹
29.得注意變量命名，若是命名tab-index，在{{ tab-index }}會理解爲tab 減去 index，經常結果爲0。
30.若在做用域中寫$scope.f = function(d){$scope.data = d;};再在其子做用域中調用scope.f('text');結果會給父做用域的$scope.data賦值。
應該改寫成this.data = d;
31.ng-click會觸發ng循環，因此執行的代碼中不能執行$apply
32.scope.vm的最大做用是讓子元素的成員改變同時能改動到父元素的成員。
33.單例模式如factory，其生命期爲應用的生命期。因此是否使用factory存放vm，須要考慮。
34. $apply會使ng進入 $digest cycle , 並從$rootScope開始遍歷(深度優先)檢查數據變動。
$digest僅會檢查該scope和它的子scope，當你肯定當前操做僅影響它們時，用$digest能夠稍微提高性能。
35.directive中執行的 $evalAsync ， 會在angular操做DOM以後，瀏覽器渲染以前執行。
36.在html裏的ng-click要獲取this，可使用$event.currentTarget
37.var binder = scope.$on('xxx');要解綁，執行binder()
38.$cookieStore.get(...)，只能訪問到path容許訪問的值
39.ng-if會產生子做用域。使用這種指令時，其內部無做用域指令對scope的修改都會修改到它的做用域；若是目標做用域在ng-if之上就會出錯。
解決方案通常有1.使用ng-show代替ng-if。2.使用factory注入，修改factory
40.ng發get請求，貌似會刪除值爲undefined的屬性
41.使用track by能夠免去移除dom再生成dom的步驟提升性能。
41.1 可是正由於再也不生成dom，因此新生成的元素上的directive指令也不會被運行。因此能不能既利用原有dom，又渲染指令呢？
42.
$http().then(function(n)) // n是包裝過的，真實數據在n.data裏
$http().success(function(data)) // data就是真實數據
43. 我經常疑惑什麼應該寫在controller裏，什麼應該寫到directive裏。
controller會先於任何directive加載，而directive加載會有順序，先子後父。根據這個來考慮怎麼寫吧。
44.當directive內有個templateUrl的子directive時，directive內使用elem.find()貌似找不到子directive的內容。
45.ng裏能夠在controller或factory等任何地方中經過$compile服務渲染指令。但指令不會即時被渲染，至少不會在controller中當即被渲染，而是在後續的檢查中被渲染。除非你在父做用域或指令的做用域上調用了scope.$digest()，則指令將被當即渲染。
當即渲染意味着當即發起對模板的請求。