angular指令的詳細講解,不斷補充

2022-05-08 08:48:39 字數 1263 閱讀 2444

獨立作用域:就是在指令中設定了scope: ****

·false共享父作用域 

·true繼承父作用域,並且新建獨立作用域 

·object不繼承父作用域,建立新的獨立作用域

一般來說我們會使用第三種方式:為了避免同一父級作用域下,多個指令的相互汙染。

在指令中設定了獨立作用域之後,就會用三種方式與外界進行互動:@,=,&

1)@這種使用方式一般使用與指令內部的作用,例如外部的控制器中定義了乙個變數,這個變數只能由控制器自己進行修改,指令只能被動接受,此時就是用這種方式。

但是這不是一種雙向繫結,因此需要花括號。

2)= 

這種方式一般用於雙向繫結,例如外部控制器定義了乙個變數,這個變數不僅控制器能進行修改,並且指令也能進行修改,兩邊資料互動統一,這個時候就使用這種繫結方式。

這是一種雙向繫結的方式意味著繫結的時候不需要花括號。

3)& 

這種方式一般是繫結函式,例如在指令內部想傳遞引數(必須以物件的形式)到外部控制器,並且能觸發控制器的某方法。

指令使用場景:

item

part-des = "['個人資訊','職務資訊','聯絡資訊']"filter-click = 'filterclick()' >

指令中:

link:

function

($scope,el,attr) );

}

外部控制器:

$scope.filterclick = function

(obj);

replace: 是乙個可選引數,如果設定了這個引數,值必須為true,因為預設值為false。預設值意味著模板會被當作子元素插入到呼叫此指令的元素內部:

.directive("mydirective",function()

})呼叫指令之後的結果如下(這是預設replace為false時的情況):

如果replace被設定為了true:

.directive("mydirective",function()

})那麼指令呼叫後的結果將是:

****:

angular的常用指令

因為ng bind 預設把html標籤轉義成字串。如果不想轉義。用這個指令。注意 當遍歷的時候,陣列有相同的值的時候,會報錯,用下面這種方法可以解決 track by ng repeat item in ccc track by index li name id ng model xx value ...

angular指令的transclude學習

最近學習angular,今天將指令中的transclude選項和ng transclude指令總結一下。本文演示用的angular版本為1.5.11。首先,angualar指令的transclude選項有三種值 false true object。transclude字面意思就是嵌入,也就是說你需不...

angular指令中 , , 的區別

當directive中的scope設定為乙個物件的時候,該指令就有了乙個獨立的作用域,angularjs提供了一種繫結策略用於隔離作用域和外部作用域進行通訊。1 or attr 使用 符號可以進行單項的資料繫結,取值總是乙個字串,所以要用 另外這也是乙個單向的繫結,外部資料改變會反應到內部,但是內部...