ng-app는 SweetAlert html에서는 호출되지 않지만 html 본문에서는 정상적으로 작동합니다.

Question

SweetAlert 내에 부트 스트랩 테이블을 성공적으로 삽입 할 수 있지만 ng-app 또는 ng-repeat를 사용하여 테이블의 행 내부에 데이터를 채울 수 있습니다. -app가 호출되지 않습니다. SweetAlert 외부의 표를 채우면 (nu-app가 호출 됨) 볼 수 있습니다. 여기에 몸에 내 테이블을 채우는 방법은 다음과 같습니다 위의

<script type="text/javascript"> 
     var app = angular.module("items", []); 
     app.controller("controller", function($scope) { 
      $scope.items = the_data; 
      console.log("called"); 
     }); 
    </script> 

<div class="col-md-3"> 
     <div class="card"> 
      <div class="content"> 
       <table class="table table-striped"> 
        <thead> 
         <th style="text-align: center">Items</th> 
        <th style="text-align: center">Price</th> 
        <th style="text-align: center">No.</th> 
        </thead> 
        <tbody ng-app="items" ng-controller="controller"> 
         <tr ng-repeat="item in items"> 
         <td align="center">{{item.name}}</td> 
         <td align="center">{{ item.price }}</td> 
         <td align="center">{{ item.number_of_items }}</td> 
         </tr> 
        </tbody> 
       </table> 
       </div> 
     </div> 
</div> 

코드가 표 안에 the_data을 채 웁니다. 이제 동일한 정확한 코드를 복사하여 swal 안에 삽입하면 테이블 만 채우지 만 채우지는 않습니다. the_data.

다음

$().ready(function(){ 
     window.operateEvents = { 
     'click .view': function (e, value, row, index) { 
      var app = angular.module("items", []); 
      app.controller("controller", function($scope) { 
       console.log("called"); 
       $scope.items = the_data; 
      }); 
         swal({ 
          title: 'Purchase details', 
          type: 'info', 
          html: '<div class="col-md-3"><div class="card"><div class="content"><table class="table table-striped"><thead><th style="text-align: center">Items</th><th style="text-align: center">Price</th><th style="text-align: center">No.</th></thead><tbody ng-app="items" ng-controller="controller"><tr ng-repeat="item in items"><td align="center">{{item.name}}</td><td align="center">{{ item.price }}</td><td align="center">{{ item.number_of_items }}</td></tr></tbody></table></div></div></div>', 
          showCloseButton: true, 
          showCancelButton: true, 
          confirmButtonText:'Done', 
         }); 
     } 
     } 
    }); 

는 SweetAlert 테이블 채우는 방법은 다음과 같습니다 : 위의 방법에서

을 console.log("called")가 호출되지 않고, 그 때문에 나는 NG-응용 프로그램은 결코 가정 여기 swal 내부의 테이블을 채우는 내 코드는 처음에는 전화 했어. 보시다시피, the_data이 행에 채워지지 않는 것을 제외하고 버튼은 잘못된 위치에 배치됩니다. 나는 누군가가 설명 할 수 있다면 그것을 고맙게 여길 것입니다. 1) 왜 ng-app가 호출되지 않고 있습니까? 2) 왜 테이블 아래에 대신 테이블 뒤에 단추를 배치됩니다 (테이블을 볼 때 단추를 클릭 할 수 없습니다)?

예제 코드는 HTML 초보자로서 매우 유용 할 것입니다.

Answer 1

결국 나는이 문제를 해결할 수 있었고 앞으로 다른 사람들에게 도움이되기를 바랍니다.

var data2 = []; 
for (var i = 0; i < row[4].length; i++) { 
    data2.push('<tr>',('<td align="center">' + data.name + '</td>'),('<td align="center">' + data.price + '</td>'),('<td align="center">' + data.number_of_items + '</td>'),'</tr>'); 
} 
function htmlTable() { 
return ['<div class="col-md-3">', 
    '<div class="card">', 
    '<div class="content">', 
    '<table class="table table-striped">', 
    '<thead>', 
     '<th style="text-align: center">Items</th>', 
     '<th style="text-align: center">Price</th>', 
     '<th style="text-align: center">No.</th>', 
    '</thead>', 
    '<tbody>', 
    data2.join(''), 
    '</tbody>', 
    '</table>', 
    '</div>', 
'</div>', 
'</div>'].join(''); 
} 
swal({ 
    title: 'Purchase details', 
    type: 'info', 
    html: htmlTable, 
    showCloseButton: true, 
    showCancelButton: true, 
    confirmButtonText:'Done', 
}); 

나는 또한 내가 수 없음을 유의하고 싶습니다 : 나는 궁극적으로 행을 채우고 과정을 반복하는 작업 NG 반복이 필요하기 때문에, 나는 <tBody> 내부의 데이터를 채우려면 다음 코드를 작성하기로 결정 테이블 아래에있는 버튼을 움직입니다. 그들은 여전히 ​​제공된 그림에 나타나는 위치에 있지만 표는 그것을 방해하지 않습니다. 대신 테이블을 좁혀 작게 만듭니다. 이 답변 아래에 해결책을 게시 할 것입니다.