angular的基本指令

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-showng-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}避免元素消失看不到動畫效果



發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章