격리 된 자식 지시문에서 양방향 데이터 바인딩

필드 집합을 포함하는 양식이 있고 양식에이 필드 집합의 숫자가 다를 수 있으므로 양식에 단추를 더 추가해야합니다. 양식에 필드 세트가없는 상황이있을 수 있습니다. 이러한 요구 사항을 충족 시키려면 지침 상속이 필요합니다. fieldset 지시문은 버튼 클릭 이벤트에 추가됩니다. Fieldset에는 템플릿이 있지만 실제 입력 필드 HTML 문자열은 페이지로드시 서버에서옵니다. 따라서 나는 다른 ID를 가진 입력 상자를 추가하여 즉시 필드 집합을 완성한 다음이 필드 집합을 양식에 추가해야합니다.격리 된 자식 지시문에서 양방향 데이터 바인딩

이 시나리오를 더 잘 설명하려면 구현을 축소하고 코드 조각을 아래에 작성한 후 plunker을 작성하십시오.

축소 시나리오에서는 form-Dir 지시어 만 페이지로드에 있습니다. 이 지시문에는 ID가 증가하는 필드에 대한 버튼이 있습니다.

<body ng-app="mainApp" ng-controller="MainCtrl"> 
     <div form-dir this-page="page" bind-field-id = "fieldId" bind-first-name="firstName" > 
      This is {{page}} page 
      <button class='btn-add'> add isolated fields </button> 
      <div class='field'> 

      </div> 
     </div> 
</body>

스크립트

var app = angular.module('mainApp', []); 

app.controller("MainCtrl", function($scope){ 
    $scope.page = "Demo" 
    $scope.fieldId = "2" 
    $scope.firstName = "John" 


}); 

app.directive("formDir", function($compile) { 

    return { 
     restrict:'A', 
     transclude: false, 
     scope:{ 
      page:"=thisPage", 
      id:"=bindFieldId", 
      firstName:"=bindFirstName" 
     }, 
     link : function(scope, element, attrs){ 
      scope.page = 'demo2'; 

      element.find('.btn-add').bind('click', function(e){ 
       var field = angular.element(e.currentTarget).siblings('.field') 

       var newScope = scope.$new(); 

       var ele = '<field-dir bind-field-id = "id" bind-first-name="firstName"></field-dir>'; 

       var directive = $compile(ele)(newScope); 

       field.append(directive); 

       console.log('btn clicked', field) 
      }) 
     } 
    }; 
}); 

app.directive("fieldDir", function() { 

    return { 
     restrict:'AE', 
     transclude: true, 
     replace: true, 
     scope:{ 
      id:"=bindFieldId", 
      firstName:"=bindFirstName" 
     }, 
     template: '<div></div>', 
     link : function(scope, element, attrs){ 

      element.append('<label>{{scope.id}} First Name fields </label>' 
       +' <input type="text" class="textbox" ng-model="firstName">' 
       +' <button class="btn-change">change first name</button>'); 

      element.find('.btn-change').bind('click', function(e){ 
       scope.$apply(function(){ 
        scope.firstName = "Doe"; 
        scope.id = parseInt(scope.id) + 1; 
       }); 


       console.log(scope) 
      }) 

     } 
    }; 
});

내가 label, input 및 템플릿 button 태그를 배치하면 코드가 작동합니다; 그러나 나의 시나리오에 따라 나는 그것을 덧붙일 필요가있다. 내가 뭘 잘못하고 있는지 알 수 없다.

출처

2016-11-04 Rajkaran07

나는 그것을 알아 냈다. HTML 문자열 필드를 추가하기 전에 $ 컴파일 만하면됩니다.

교체

element.append('<label>{{scope.id}} First Name fields </label>' 
+' <input type="text" class="textbox" ng-model="firstName">' 
+' <button class="btn-change">change first name</button>');

var r = $compile('<label>{{id}} First Name fields </label>' 
    +' <input type="text" class="textbox" ng-model="firstName">' 
    +' <button class="btn-change">change first name</button>')(scope) 

element.append(r);

와

출처

2016-11-04 17:32:51 Rajkaran07

격리 된 자식 지시문에서 양방향 데이터 바인딩

답변

관련 문제