1. 程式人生 > >angular指令的詳細講解,不斷補充

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

作用 code clas 參數 -i 使用方式 selected 自己 object

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

·false 共享父作用域
·true 繼承父作用域,並且新建獨立作用域
·object 不繼承父作用域,創建新的獨立作用域

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

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

1)@

這種使用方式一般使用與指令內部的作用,例如外部的控制器中定義了一個變量,這個變量只能由控制器自己進行修改,指令只能被動接受,此時就是用這種方式。
2)=
這種方式一般用於雙向綁定,例如外部控制器定義了一個變量,這個變量不僅控制器能進行修改,並且指令也能進行修改,兩邊數據交互統一,這個時候就使用這種綁定方式。

3)&

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

指令使用場景:
<choice-item part-des = "[‘個人信息‘,‘職務信息‘,‘聯系信息‘]" filter-click = ‘filterClick({headConfig:headConfig})‘ ></choice-item>
指令中:
link: function($scope,el,attr) {
// 點擊確認
$scope.filterClick({headConfig: $scope.emConfig});
} 
外部控制器:
$scope.filterClick = function(obj){
  $scope.headConfig = getSelectedConfig(obj.headConfig);
  $scope.filter_show = false;
};

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