Angularjs-probelm不工作$編譯後得到ajax的響應

我創建了打印頁面的指令。這個指令有模板頁面，包括按鈕和打印模板（這對ng對象有ngRepeat）.print按鈕被點擊fire「click 「指令的Controller中的功能然後ajax請求發送到服務器以獲取填充模板的對象數組。

Mainpage.html

<div ng-class="{'btn':true,'btn-warning':true,'disabled':disableBtn}" data-toggle="modal" 
        ng-click="getdetail=true;" data-target="#detailModal">order detail</div> 
        <print-order disable-btn="disableBtn" order="selectedItem"></print-order>

print.template.html

<a ng-click="ctrl.click()" ng-class="{'btn':true,'btn-info':true,'disabled':ctrl.disableBtn}" > 
print 
    <i class="fa fa-print"></i> 
</a> 
<div id="printSection"> 
    <table style="width: 100%;font:13px tahoma;" cellspacing="0" cellpadding="0"> 
     <thead> 
      <tr> 
       <th style="border-bottom: 3px solid black;"> 
        <p>number: </p> 
        {{ctrl.order.fldTracking}} 
       </th> 
       <th> 
        <img src="/images/receipt-logo.png" alt=""> 
       </th> 
       <th style="border-bottom: 3px solid black;"> 
        <p>code :</p> 
        <p> {{ctrl.order.customer.fldMobilePhone}} 
         <br> {{ctrl.order.fldAtFA.split("-")[0]}} 
        </p> 
       </th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr style="border-bottom: 3px solid black;"> 
       <td colspan="3" style="padding: 10px;line-height: 20px;"> 
        cutomer : {{ctrl.order.customerAddress.fldContactName }} 
       <br /> address: {{ctrl.order.customerAddress.fldAddress }} 
       <br/>mobile : {{ctrl.order.customerAddress.fldMobilePhone}} 
       <br/> phone : {{ctrl.order.customerAddress.fldTelephone}} </td> 
      </tr>   
     </tbody>   
    </table> 
    <h1>{{ctrl.title}}</h1> 
    <table dir="rtl" width="100%" border="0" cellspacing="0" cellpadding="0" align="center" style="margin-top:20px;border-top:2px solid #000000;;border-bottom:2px solid #000000;border-color: #000000"> 
     <tbody> 
      <tr> 
       <td width="40%" style="padding-right:10px;font-size: 10px" align="right">name</td> 
       <td width="20%" style="font-size: 10px" align="center">number</td> 
       <td width="20%" style="font-size: 10px" align="center">price</td> 
       <td width="25%" style="font-size: 10px" align="right">price</td> 
      </tr> 
      <tr ng-repeat="item in ctrl.Components track by $index"> 
       <td style="padding-right:10px;font-size: 9px"> 
        {{item.offer.fldTitle}}<br> 
       </td> 
       <td style="font-size: 12px" align="center">{{item.fldQty}}</td> 
       <td style="font-size: 10px" align="center">{{item.fldUnitPrice}}</td> 
       <td style="font-size: 10px;padding: 5px">{{item.fldTotalPrice}}</td> 
      </tr> 
     </tbody> 
    </table> 
</div>

printdirective.js

myApp.directive("printOrder",["$window","orderService","$timeout","$compile",function($windows,orderService,$timeout,$compile){ 
return{ 
    restrict:"AE", 
    bindToController:{ 
     disableBtn:"=", 
     order:"=" 
    }, 
    templateUrl:"/Widgets/printOrder.template.html",   
    transclude: true, 
    scope:true, 
    controllerAs:"ctrl", 
    controller:function(){        
     this.click=function(){    

      var popupWinindow =$windows.open("", '_blank', 'width=300,height=500'); 
      orderService.getOrderDetail(this.order.id) 
      .then(function(result){      
       this.Components=result;      
       popupWinindow.document.open();      
       var el=angular.element("#printSection") 
       $compile(el)(this); 
       $timeout(function(){           
        // console.log(el.html());           
        popupWinindow.document.write(
          `<html> 
           <head></head> 
           <body style="direction: rtl;">`+el.html()+` </body> 
          </html>`);        
        popupWinindow.document.close(); 
       },500)           
      }); 
     } 
    },   
}

}]）

當我點擊打印按鈕。訂單ID發送到directiv e然後詳細的命令請求的服務器與Ajax，這應該填寫「＃printSection」的模板$編譯，但是這個不綁定和組件屬性是空的。

來源

2017-10-14 mehdi nejati

但這個不綁定和組件屬性是空的。

不能調用$compile與this，你的情況$compile(el)(this);

this = scope

用途：

controller:function($scope){ 
    $compile(el)($scope); 
}

Small Demo

是否是錯字？ var el=angular.element("#printSection")

你的意思是這樣：

var warapper = document.querySelector('#printSection'); 
angular.element(warapper); //...

來源

2017-10-14 08:17:58

Angularjs-probelm不工作$編譯後得到ajax的響應

回答

相關問題