Question

我在SPA中有一个print指令，在第一个打印函数运行后似乎失去了它的双向数据绑定。我确信它与克隆和追加元素有关。

该指令如下：

agency.directive("pasPrint", ['AgentModel','Dev', 
function(agentModel, dev) {
var printSection = document.getElementById("printSection");
function printElement(elem) {
    // clones the element you want to print
    var domClone = elem.cloneNode(true);
    if (!printSection) {
        printSection = document.createElement("div");
        printSection.id = "printSection";
        document.body.appendChild(printSection);
    } else {
        printSection.innerHTML = "";
    }
    printSection.appendChild(domClone);
}

return {
    restrict: 'A',
    link: function($scope, $element, attrs) {
        $scope.printModel = {};
        $scope.today = new Date().toJSON().slice(0,10);
        $element.on("click", function () {
            var elemToPrint = document.getElementById(attrs.printElementId);
            if (elemToPrint) {
                printElement(elemToPrint);
                window.print();
            }
        });
    },
    controller: ["$scope","$element", "AgentModel", function($scope, $element, agentModel) {
        $scope.agentModel = agentModel;
    }]
};
}]);

这里整个模块中使用的模型是agentModel.singleAgent，它当然代表一个代理。该指令只是打印代理商硬拷贝记录的封面页。我们第一次提起代理记录时封面页打印正确。当我们加载另一个代理时，打印预览显示正确更新的代理信息。在agentModel.singleAgent 2路绑定中（在打印的printSection中使用相同的值。但是第二次打印尝试也会打印第一个代理信息，因此打印任何其他代理的任何其他尝试都会打印第一个代理数据，甚至认为singleAgent模型已正确更新。

打印预览中的html如下：

<div class="modal-header ng-scope">
  <button type="button" class="close" aria-label="Close" data-ng- click="cancel()"><span aria-hidden="true"> &times; </span></button>
  <h3 class="modal-title ng-binding"> Edit &amp; Print Cover Sheet </h3>
</div>
<div class="modal-body">            
   <form class="inline-form">
    <div class="form-group">
        <label class="form-label" for="PRINT_DESC">File Description:   </label>
        <input class="input-medium" type="text" id="PRINT_DESC" name="PRINT_DESC" data-ng-model="printModel.PRINT_DESC" />
    </div>
</form>
<div id="printPreview">
    <table class="table table-cell-nowrap table-responsive">
        <thead>
            <tr>
                <th colspan="2"><strong>Type: <em>{{printModel.PRINT_DESC}}</em></strong></th>
                <th colspan="2" style="border: 1px #dadada dotted"><div class="clearfix pull-right"><strong>{{agentModel.singleAgent.AGENT_NUMBER}}</strong></div></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><strong>Agent Name: {{ agentModel.singleAgent.AGENT_LNAME }}, {{ agentModel.singleAgent.AGENT_FNAME }} </strong></td>
                <td><strong>Agent #: {{ agentModel.singleAgent.AGENT_NUMBER }}</strong></td>
                <td><strong>UID: {{ agentModel.singleAgent.AGENT_UID }}</strong></td>
                <td></td>
            </tr>
            <tr><td colspan="4">Printed On: {{ today }} </td></tr>
        </tbody>
    </table>
</div>
<div id="printSection" class="col-md-12"><!-- place nothing in here except what should be printed. by default the content in the print section IS hidden -->        
    <table class="table table-cell-nowrap table-responsive printCoverFontSize">
        <thead>
            <tr>
                <th colspan="2"><strong>Type: <em>{{printModel.PRINT_DESC}}</em></strong></th>
                <th colspan="2" style="border: 1px #dadada dotted"><div class="clearfix pull-right"><strong>{{agentModel.singleAgent.AGENT_NUMBER}}</strong></div></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><strong>Agent Name: {{ agentModel.singleAgent.AGENT_LNAME }}, {{ agentModel.singleAgent.AGENT_FNAME }} </strong></td>
                <td><strong>Agent #: {{ agentModel.singleAgent.AGENT_NUMBER }}</strong></td>
                <td><strong>UID: {{ agentModel.singleAgent.AGENT_UID }}</strong></td>
                <td></td>
            </tr>
            <tr><td colspan="4">Printed On: {{ today }} </td></tr>
        </tbody>
    </table>
</div>
</div>
<div class="modal-footer">
   <div class="pull-left">
      <button class="btn btn-warning" data-pas-print data-print-element-id="printSection"><i class="fa fa-print fa-lg"></i> Print </button>
   </div>
    <div class="pull-right">
     <button class="btn btn-default" data-ng- click="cancel()">Cancel</button>
 </div>

printModel模型只是从文本框中获取值并包含它以进行打印，只是一个描述性术语。我不知道为什么这不起作用。我只是将我在网上找到的其他脚本拼凑起来与我们的应用程序一起工作。我有点像Newb，我非常感谢我能得到的任何帮助，所以提前谢谢你。如果您需要更多信息，请随时询问。如果我不得不猜测我会说它与克隆和元素的清空有关，如果我不得不猜测，但我不知道如何解决它。请帮助。

angularJS print指令失去双向绑定

0 个答案: