ngModel을 사용하여 지시문에서 요소를 컴파일하는 방법은 무엇입니까?

Question

편집 가능한 표 셀을 만들려고하지만 편집 가능한지 여부를 결정하는 몇 가지 조건이 있으므로 템플릿에 입력을 포함 할 수 없습니다. 내 목표는 셀에있는 모델과 동일한 모델을 사용하여 셀을 만듭니다.하지만 작동하지 않는 것입니다.

HTML :

<td editable-grid-cell ng-model="batch.amount" name="amount"></td> 

지침 번호 : 이렇게

.directive('editableGridCell', function($compile) { 
    return { 
     link: function(scope, ele, attrs) { 
      scope.field = attrs.ngModel; 
      ele.append($compile('<input type="text" class="form-control" ng-model="field"/>')(scope)); 
     } 
    } 
}) 

은 'batch.amount'로 채워지 입력을 초래한다. 나는이 고립 된 범위를 사용하여 작업 쪘 구만 : 나는 고립 범위는 여기에 작동하지 않습니다 생각, 그래서 내가 내 모든 테이블 옵션은 컨트롤러에서 설정 한 때문에

scope: { 
    model: '=ngModel' 
} 
... 
ele.append($compile('<input type="text" class="form-control" ng-model="model"/>')(scope)); 

을, 나는 부모 범위에 액세스 할 수 있어야합니다 .

도움 주셔서 감사합니다.

Answer 1

당신은 당신이 다음 범위를 분리 사용하려는 해달라고하면

scope: { 
    model: '=ngModel', 
    tableOptions: '=' 
} 

은 또는, 당신은 바인드합니다

.directive('editableGridCell', function($compile) { 
    return { 
     link: function(scope, ele, attrs) { 
      var html = '<input type="text" class="form-control" ng-model="'; 
      html += attrs.ngModel; 
      html += '"/>'; 
      ele.append($compile(html)(scope)); 
     } 
    } 
})