각도 1.5. 구성 요소 범위에 바인딩 할 수 있도록 투명 템플릿을 만드는 방법

Question

일반 유효성 검사 및 저장 기능과 함께 양식 구성 요소를 사용하고 있습니다. 입력은과 같이, 매개자 템플릿으로 형성 전달됩니다

<form-editor entity="vm.entity"> 
     <input ng-model="vm.dirtyEntity.name" required name="nameInput"> 
</form-editor> 

문제는 NG 모델이 부모 VM의 dirtyEntity 필드를 만드는 대신의 구성 요소 중 하나를 수정된다. "formVm"으로 구성 요소 컨트롤러를 정의하는 것이 도움이되지 않았습니다.

강제 변환 된 요소 ng-model이 구성 요소의 범위 만 변경하도록 할 방법이 있습니까?

또는 transcluded 템플릿과 구성 요소 컨트롤러 사이에서 상호 작용하는 것이 올바르지 않다고 간주되어서는 안됩니다. 프로그래밍 방식 트랜스 클루 전을 위해 의미 요소를 복사하여 폼 컨트롤러에 추가, 구성 요소에서

: dfsq의 plunkr에

Answer 1

건물, 사용자의 문제에 대한 해결책입니다.

할 수 있습니다 프로그래밍 $의 transclude 서비스를 사용 transclude이 같은 폼에 요소를 추가합니다

이

$transclude($scope, function(clone) { 
    $element.find('form').append(clone); 
}) 

그리고이 같은 양식 컨트롤러에 요소를 추가 :

$scope.testForm.$addControl($element); 

에서 이 경우에는 시간 초과로 랩핑해야합니다. 그렇지 않으면 각도가 컨트롤러를 인스턴스화하고 코드가 실행되지만 폼 컨트롤러는 아직 인스턴스화되지 않습니다.

여기에 전체 조각이고 당신은, 그러나, plunkr에게 here

controller($scope, $element, $transclude, $timeout) { 
    // use a timeout to break javascript flow to allow a DOM update 
    $timeout(function() { 
    $transclude($scope, function(clone) { 
     $element.find('form').append(clone); 

     // take the form and add the elements to it 
     $scope.testForm.$addControl($element); 
    }) 
    }) 
} 

을 찾을 당신이 입력 할 수없는 요소를 확인해야 할 수도 있습니다 염두에 유지할 수 있습니다. 폼 컨트롤러가 컨트롤로 추가 된 이미지에 얼마나 강건한 지 확신 할 수 없습니다.