ng-app
ng-app在同個頁面是可以有多個的,但是兩個ng-app是不可以互相嵌套的(儘量不要使用多個ng-app)
ng-app不寫在頁面上的時候可以手動啓動,
angualr.element((document).ready(function(){
angular.bootstrap(document,["myModule"]); myModule是模塊名,document是控制範圍,也可以換成id等
});
需要注意的是:ng-app不要多次啓動,否則會拋出異常
如果沒有外部導入jq,那麼angualr.element=jqLite
如果是兩個ng-app在同個頁面那麼第二個ng-app就需要手動啓動了。因爲angular是自動識別第一ng-app,後面就不再識別了所以需要手動啓動
ng-bind
angular的雙向綁定是很有名的,一開始我都是用{{detail.totle}}雙花括號來讀數據的,這樣會有一個問題,那就是數據還沒加載出來的時候就會看到{{detail.totle}}這樣的形式這樣會使頁面變得非常難看,那麼我們可以用ng-bind=“detail.totle”的方式來綁定數據,在頁面還沒加載出來的時候,那麼頁面上綁定數據的地方就是空白的,這樣就不會使頁面邊的非常醜。不過這並不是說{{detail.totle}}不可用,如果是在單頁應用中使用數據綁定的話,那麼只需要在第一個頁面使用ng-bind就可以了
另外:ng-bind是 ng-bind="detail.average+'元'"以這樣的方式去使用的,她是可以進行兩個數據的疊加的。
ng-if和ng-show&&ng-hide
ng-if和ng-show/ng-hide的最大區別是ng-if是移除和生成dom節點
no-show和ng-hide,它是通過CSS顯示或隱藏DOM節點
這樣會有一個很重要的問題就是:ng-if爲true的時候,這個重新加載的dom節點,這個dom節點的是編譯後的狀態,也就是說如果你用jq對這個dom節點進行了操作也會隨之消失(例如:jq使用了一個addClass方法,那麼ng-if爲true)生成的dom節點,也會沒有了這個class
那麼ng-show有個問題就是當dom節點數目很多的時候,加載的速度就會變得非常慢,每一個指令都有自己的優缺點所以根據使用情況來區分吧!
directive
directive可以作爲元素名,屬性、class、註釋等作用
<span my-dir="exp"></span>
<span class="my-dir: exp;"></span>
<my-dir></my-dir>
<!-- directive: my-dir exp -->
但是directive多作爲屬性使用
directive的使用方式
<hello> 1111 </hello>
appModule.directive('hello', function() {
return { restrict: 'E',
template: '<div>Hi there<span ng-transclude></span></div>',
transclude: true
};
});
當transclude爲true的時候那麼在template中必須要有ng-transclude而且必須有標籤裝着這個指令,
那麼原來在<hello></hello>標籤內的東西就不會被取代掉了
當然我也可以不用transclude而用replace: true,那麼<hello></hello>標籤內的東西就會被取代掉
link不可以依賴注入,controller可以依賴注入
$apple()
如果 AngularJS沒有獲得一個機會來調用$apply,就需要你手工的調用它。
方法1:直接修改sb對象. 不會自動觸發監聽函數scope.sb.name='Tonny';
方法2:使用scope的$apply方法,在數據修改後會自動觸發監聽函數scope.$apply("sb.name = 'Tonny'");
方法3:直接修改sb對象,然後調用$apply方法來傳播變化。scope.sb.name='Tonny';scope.$apply("");
過濾器
日期:{{ 2015156815987 | date:"MM/dd/yyyy hh:mm:ssa"}}轉換爲時分秒的格式 這是一個時間戳,不是我們平時使用的時間,ss後面的a可以提示是上午還是下午時間
自定義過濾器
app.filter('filter1',function(){
return function(item){
return item+"ddddd";
}
}
使用的時候:{{'aaaa'|filter1}}這樣就可以直接使用了
注意點:
1、自定義的service要寫在內置service的後面
2、內置的service以$開頭,自己定義的service應該避免
3、angular應該要摒棄jq操縱dom節點的思路來進行開發,在angular的方法中phoneEdit($event)傳遞事件的時候他不可以直接$(this).prev().removeAttr("disabled")這樣子進行操作,他需要轉換一下成爲angular裏jqlite的東西
angular.element(event.currentTarget).prev().removeAttr("disabled");
animation
ng-enter-stagger{transition-delay:0.3s;transition-duration:0s}
要在ng-hide-add{}/ng-hide-remove{}都要加上{display:block;!important}避免元素消失看不到動畫效果