자식 요소에서 데이터 추출 및 지시문에서 사용

Question

유연한 스프레드 시트 형식 데이터 입력 폼을 표시하는 데 사용하려는 일반 지시문을 만들려고합니다.

모든 데이터 구조를 & HTML 코드에 입력하고 지시문을 가져 와서 나중에 사용할 수 있도록 범위에 저장하고 싶습니다. 여기

내가 사용하고 싶습니다 샘플 HTML의 (이하 "필드"요소의 정보 것은 내가 범위에 들어가하고 싶은 것입니다) :

<array title="Breakdown" data="data.breakdown"> 
    <field type="text" default="" name="descr">Description</field> 
    <field type="number" default="0" name="price">Price</field> 
    <field type="number" default="0" name="tax">Tax</field> 
</array> 

그리고 지침까지

.directive('array', function(){ 
    return { 
    restrict: "E", 
    replace: true, 
    transclude: true, 
    templateUrl: "js/array-template.html", 
    compile: function(tElement, tAttrs, transclude) { 
     var x=transclude(tElement);    
     return function(scope, element, attrs) { //the linking function 
     scope.title=attrs.title; 
     } 
    } 
    } 
} 

변수 x는 나에게 html 요소 배열을 제공하지만 "필드"요소뿐만 아니라 빈 "span"요소도 포함합니다. 필요한 경우 작업 할 수 있지만 더 간단한 방법이 있다고 생각합니다.

Answer 1

솔루션을 찾았습니다!

먼저 나는 AngularJS와 웹 사이트 메인 페이지의 마지막 예제를 사용했습니다 : 나는 <FIELD>을 위해 NG-transclude 지시어를 사용했기 때문에 시작 좋았다 그러나 렌더링 된 HTML 코드는 항상 어떤 쓰레기를 포함 http://angular.github.io/angularjs.org/#/list 처리 된 요소들.

그래서 더 자세히 살펴본 결과 동적으로 생성 된 템플릿 생성의 몇 가지 예가 발견되었습니다. 그렇게하면 훨씬 더 많은 유연성을 얻을 수 있으며 결과 코드에 낡은 조각이 나타나지 않고도 HTML을 완전히 다시 작성할 수 있습니다.

AngularJS 웹 사이트 (공유 컨트롤러)에서 사용 된 방법이 주 지시문의 템플릿에 ng-transclude가 사용되지 않았을 때 고장 났기 때문에 지시어간에 다른 통신 방법을 사용해야했습니다. 두 개의 지시문이 모두 같은 객체에 속하기 때문에 모듈 객체에 추가 된 속성 만 사용했습니다.

다음은 솔루션의 전체 코드입니다. 나는 그것이 어떤 사람들에게는 도움이되기를 바랍니다.

HTML : 당신이 범위에 액세스 할 수 있습니다 충분한 의견 ;-)

function record(){ //a simple constructor to provide the data for the table 
    return [{ 
      descr: "example", 
      price: 10, 
      tax: 0.07 
     }, 
     { 
      descr: "something else", 
      price: 15, 
      tax: 0.11 

     } 
    ]; 
} 

var mod=angular.module('flexlist', []); 
mod.fields=[]; //container that is shared between directives 
//the directive for <ARRAY> 
mod.directive('array', function($compile){ //injecting the $compile service 
    return { 
     restrict: 'E', //restricted to element only 
     replace: true, 
     scope:{ 
      title: '@title' //getting the title attribute into the scope 
     }, 
     link: function(scope,element,attr){ 
      //calling the function specified in the "data" attribute 
      //which should return the data to be filled into the table 
      scope.source=window[attr.data](); 
      scope.fields=[]; //preparing the "field" variable in the scope 
      //copying the data collected from the <field> elements into the scope 
      angular.copy(mod.fields,scope.fields); 
      //preparing the collection for the next use 
      //(in case more than one <ARRAY> block is in a page 
      mod.fields=[]; 
      newCont=angular.element( //creating the template's HTML 
'<FIELDSET>'+ 
    '<LEGEND>{{title}}</LEGEND>'+ 
    '<TABLE border=1>'+ 
     '<TR>'+ 
      '<TH ng-repeat="fld in fields">{{fld.title}}</TH>'+ 
     '</TR>'+ 
     '<TR ng-repeat="line in source">'+ 
      '<TD ng-repeat="fld in fields">{{line[fld.name]}}</TD>'+ 
     '</TR>'+ 
    '</TABLE>'+ 
'</FIELDSET>'); 
      //applying the Angular "magic" -- the directives in the template 
      $compile(newCont)(scope); 
      element.replaceWith(newCont); //replace the whole <ARRAY> element 
     }, 
     controller: function($scope, $attrs){ 
      // nothing here yet 
     } 
    }; 
}); 

mod.directive('field',function(){ 
    return { 
     require: '^array', //the "^" means that <FIELD> has to be inside <ARRAY> 
     restrict: 'E', //restricted to be an element only 
     link: function(scope,element,attrs){ //collecting the data from the element 
      mod.fields.push({ //pushing the data into the collection object 
       type: attrs.type, 
       'default': attrs['default'], 
       name: attrs.name, 
       title: attrs.title     
      }); 
     } 
    }; 
});