지시어 재사용을위한 동적 모델

Question

하나의 컨트롤러와 3 개의 탭이있는 페이지가 있습니다. 각 탭에는 자체 ng 그리드와 표시되는 행을 필터링하기위한 텍스트 상자 (내장 필터 상자가 아님)가 표시됩니다.

(다른 페이지에서했던 것처럼) 각 탭에서 사용하려는 필터 상자에 대한 간단한 지시문을 만들었습니다.

myDirectives.directive('myGridFilter', function() { 
    return { 
    restrict: 'E', 
    templateUrl: 'filterTemplate.html' 
    } 
}); 

이

는 filterTemplate.html이다

<label input="filterLabel" for="filterBox">Filter: </label> 
<input id="filterBox" type="text" placeholder="type filter here" ng-model="gridOptions.filterOptions.filterText" /> 

I는 각각의 탭에 대한 적절한 데이터 세트를 참조하는 세 NG - 그리드 ($scope.gridOptions_1, $scope.gridOptions_2 및 $scope.gridOptions_3)를 만들었다.

내 질문에 내가 ng-model을 지정할 수 있도록 어떻게 될 지시어를 수정할 수있다 gridOptions_1.filterOptions.filterText 대 gridOptions_2.filterOptions.filterText 대 gridOptions_3.filterOptions.filterText 대 gridOption.filterOptions.filterText 된 일반?

• ng-model="gridOptions{{subgrid}}.filterOptions.filterText"
• ng-model="gridOptions[subgrid].filterOptions.filterText"
• ng-model="gridOptions[scope.subgrid].filterOptions.filterText"
: 여기
는 지시
• 에

  • 추가 scope: { subgrid: '@subgrid' }가 가지고 템플릿 파일을 변경 ... 내가 성공하지, 뭘하려
• 이되고 내 페이지의 지침에 대한 참조를 변경 <myGridFilter subgrid="_1"></myGridFilter>

, 내가 다른 페이지에 일반 gridOptions 경우에 대한 지침을 다시 사용할 수 있도록하고 싶습니다, 그래서 또한 템플릿에 {{subgrid||''}}을 시도했지만 동적 케이스를 얻는 방법을 알아낼 때까지 기본 케이스를 조정하려고 시도하지 않았습니다 ...

당신의 도움과 제안에 감사드립니다!

Answer 1

scope: { subgrid: '=subgrid' }을 지시문에 간단히 추가하고 <my-grid-filter sub-grid="gridOptions_1"></my-grid-filter> 속성으로 지시문을 호출 할 수 있다고 생각합니다. (@subgrid으로 시도했지만 @은 텍스트 속성 용이고 =은 속성과 지시문 범위 사이의 실제 바인딩 용입니다).