transclude : 'element'를 사용할 때 ngModel이 제대로 바인딩되지 않았습니다.

Question

양식 입력을 래퍼 주위에 배치하는 방법을 사용하고 있으며 그렇게 할 때 내 ng-models가 작동을 멈추는 것으로 나타났습니다. http://plnkr.co/edit/AUbB4BYGrdGr7Mhx0a9c?p=preview

왜 그렇게입니다 :

내가 촬영 한 접근 방식을 정리하여 plunkr을 만들었습니다?

업데이트 (자세한 내용은) :

이의 주요 아이디어를 신속하게 의미 깨끗한 것을 허용하여 부트 스트랩 양식을 만들 수있을 것입니다. 예 :이에

<input ng-mode="newUser.firstName" name="firstName" first-name required></input> 

그리고 그것을 켜십시오 :

<div class="form-group has-feedback" 
     ng-class="{ 'has-error': form.firstName.$invalid && !form.firstName.$pristine, 
        'has-success': form.firstName.$valid }"> 
     <div class="input-group"> 
      <span class="input-group-addon"> 
       <i class="fa fa-user"></i> 
      </span> 
      <input class="form-control" type="text" ng-model="newUser.firstName" 
        name="firstName" placeholder="First Name" required/> 
     </div> 
     <span class="form-control-feedback no-label"> 
      <i class="fa" 
       ng-class="{ 'fa-ban': form.firstName.$invalid && !form.firstName.$pristine, 
          'fa-check': form.firstName.$valid }"></i> 
     </span> 
    </div> 

부트 스트랩 형태는 정말 장황 나는 이상, 이상 같은 스타일을 사용하는 경향이있다.

이 방법을 사용하면 나중에 UI를 향상시키기 위해 유효성 검사기 또는 기타 서비스에 연결할 수있는 재사용 가능한 UI 양식 구성 요소를 개발할 수 있습니다.

Answer 1

을 제공 한 코드의 조각을하려고하는의 (우선 순위 : 0)

demo.directive('wrapper', function() { 
    return { 
    restrict: 'A', 
    scope: {}, 
    transclude: 'element', 
    priority: 1, 
    link: function (scope, element, attrs, ctrls, transclude) { 
     var template = angular.element('<ng-transclude></ng-transclude>'); 
     transclude(scope.$parent, function (clone) { 
     template.append(clone); 
     element.after(template); 
     }); 
    } 
    } 
}); 

Fork of your Plunker

:하여 범위 지정 문제를 피하기 위해, 당신의 지시자가 먼저 실행되도록합니다

Answer 2

사용 transclude: true 대신 transclude: 'element'

그리고 당신이 당신이 ng-model보다 더 높은 무엇인가에 대한 지침의 priority 설정