Question

我创建了制作打印页面的指令。这个指令有模板页面，其中包括按钮和打印模板（这在结果对象上有ngRepeat）。点击了按钮＆＃34;点击＆＃34;指令控制器中的函数然后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的顺序发送到指令然后详细的服务器的订单请求与ajax，这应填写＆＃34; #printSection＆＃34; $ compile的模板但是这个不绑定和Components属性是空的。

Answer 1

但是这个不绑定和Components属性是空的。

根据您的情况this

，您无法使用$compile(el)(this);致电$compile

this！= scope

使用：

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

Small Demo

这是错字吗？ var el=angular.element("#printSection")

你的意思是：

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

在得到ajax的响应后，Angularjs-probelm不能工作$ compile

1 个答案: