ng-binds가 포함 된 HTML을 옮기기

나는 필터링 명령/내보내기 기능을 사용하여 ng-table을 감싸는 지시문을 작성 중입니다. <td> 요소가 동적이어야하므로 여러 테이블에서 재사용 할 수 있습니다. 내가 ng-transcludeng-binds가 포함 된 HTML을 옮기기

문제를 사용하여이 문제를 처리하기 위해 시도하고 나의 <td> 요소가 몇 가지 지침을 필요로한다는 것입니다 같은 ng-bind, data-title 및 sortable있다. 지시어에 의해 중첩되도록 시도 될 때까지 이미 빈 값으로 렌더링되었습니다.

<div> 
    <my-data-table search-filter="ss" table-values="mvData"> 
    <td data-title="'UUID' | translate" sortable="'id'" ng-bind="row.uuid | shortUuid"></td> 
    <td data-title="'DEVICE.UNAME' | translate" sortable="'uname'" ng-bind="row.uname"></td> 
    <td data-title="'DEVICE.LOGIN' | translate" sortable="'last_login'">{{{true: (row.last_login | selectedTimezone | moment:'MMM D, YYYY h:mma'), false: 'N/A'}[!!row.last_login]}}</td> 
    </my-data-table> 
</div>

이 지침 템플릿 :

<div class="row"> 
    <div class="col-sm-12"> 
    <table ng-table="mvData.tableParams" class="table table-striped table-hover table-bordered" template-pagination="src/tables/responsive-pager.html"> 
     <tr ng-repeat="row in $data"> 
     <div ng-transclude></div> 
     </tr> 
    </table> 
    </div> 
</div>

지시어들이 지시 여기

에 삽입 될 때까지 나는 내보기 마크 업이 렌더링되는 것을 <td> 행을 방지하는 방법이 필요합니다 선언 :

angular.module('myApp') 
.directive('myDataTable',function() { 

    return { 
     restrict:'E' 
     , templateUrl:'src/tables/myDataTable.tpl.html' 
     , transclude:true 
     , scope: { 
      searchFilter:'=' 
      , tableValues:'=' 
     } 
     , link:function(scope,el,attr,ctrls) { 
      console.log('hello world'); 
     } 
     } 
});

출처

2014-12-19 dmamills

문제의 일부는 spli 표 및 열을 지시문 및 코드로 묶은 내용으로 변환하면 Angular는 잘못된 HTML (<td> 요소가 <table> 및 <tr> 요소 외부에 존재할 수 없음)에서 DOM 조작을 시도하므로 혼란스러워합니다.

은 당신이해야 할 몇 가지가 있습니다,이 문제를 얻으려면 :

보다는 매개자 내용의 <td>, 당신은 (이 될 것 <div>에 다음을 변경해야합니다 나중에 <td>으로 바뀜)
서식 파일 선언이 더 복잡해 지므로 서식 파일을 완전히 문자열로 구성 할 수 있습니다. 여기에서는 원하는 HTML을 만드는 논리를 수행합니다. 이 문자열 템플릿을 Angular에 전달하면 나머지 모든 기계가 작동합니다. 기본적으로 콘텐츠를 수동으로 전송하고 있습니다. 여기

은 NG 테이블 선언을 포함하는 샘플, 그러나 단순위한 NG-테이블 지침이 포함되어 있지 않습니다

<html> 
<head> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script> 
</head> 
<body ng-app="myApp"> 
<div ng-controller="MainCtrl"> 
    <my-data-table search-filter="ss" table-values="mvData"> 
    <div data-title="'UUID' | translate" sortable="'id'" ng-bind="row.uuid"></div> 
    <div data-title="'DEVICE.UNAME' | translate" sortable="'uname'" ng-bind="row.uname"></div> 
    <div data-title="'DEVICE.LOGIN' | translate" sortable="'last_login'"></div> 
    </my-data-table> 
</div> 
</body> 
<script> 
    var app = angular.module('myApp',[]); 

    app.controller("MainCtrl", function($scope){ 
     $scope.mvData= { 
      $data : [ 
       {uuid : 'abc', uname : 'test'}, 
       {uuid : 'abc1', uname : 'test1'}, 
       {uuid : 'abc2', uname : 'test2'}, 
       {uuid : 'abc3', uname : 'test3'} 
      ] 
     }; 
    }) 

    app.directive('myDataTable',function() { 
     return { 
      restrict:'E', 
      template : function(elem, attr){ 
       var startStr = 
        '<div class="row">' + 
         '<div class="col-sm-12">' + 
          '<table ng-table="mvData.tableParams" class="table table-striped table-hover table-bordered" template-pagination="src/tables/responsive-pager.html">' + 
           '<tbody><tr ng-repeat="row in tableValues.$data">'; 
       var endStr = '</tr></tbody>' + 
          '</table>' + 
         '</div>' + 
        '</div>'; 

       var template = startStr; 
       var colStr; 
       angular.forEach(elem.find("div"), function(item){ 
        colStr = item.outerHTML.replace('<div ','<td ').replace('</div>','</td>'); 
        template = template + colStr; 
       }); 

       template = template + endStr; 
       return template; 
      }, 
      scope: { 
       searchFilter:'=' 
       , tableValues:'=' 
      }, 
      } 
    }); 



</script> 

</html>

을

출처

2014-12-21 03:50:31 rchawdry

답변

관련 문제