ng-change 指令没有按预期工作答案

【问题标题】：ng-change directive doesn't work as expectedng-change 指令没有按预期工作
【发布时间】：2016-10-17 10:45:00
【问题描述】：

$scope.invoicename 中存储了发票的数据，其中包含每张发票的 id、名称和 pdfmake。当用户选择发票名称时，它应该显示由所选pdfmake设计的pdf文档。这是我的选择 html

 <select class="form-control"  ng-change="zafakturu(dizajn.pdfmake)" ng-model="dizajn.pdfmake">
     <option value={{dizajn.pdfmake}} ng-repeat="dizajn in invoicename" selected="selected">{{dizajn.name}}</option>
 </select>

这里是更改调用的函数和应该显示 pdf 文档的函数 makeInvoice。

    var makeInvoice = function(doc){

        pdfMake.createPdf(doc).getDataUrl(function(dataURL) {
            $scope.fajll= dataURL;
        });
        console.log(doc);
    };

    $scope.zafakturu = function (pdf){
        $scope.docDefinition = eval("(" + pdf + ")");
        makeInvoice($scope.docDefinition);
    };

这里是显示 pdf 的 html 元素。

 <object ng-show="fajll" data="{{fajll}}" type="application/pdf" style="width: 100%; height: 400px;"></object>

问题是，当我选择一个值时，具有该值的 pdf 会在第二次选择后显示。例如，如果我有选项 1、2、3，并且我选择了选项 2，那么只有在我选择 1 或 3 后才会显示该选项的 pdfmake。如果有人可以帮忙？

【问题讨论】：

在创建选择选项列表时应尽可能使用ng-options 而不是ng-repeat。您可能需要考虑切换到 ng-options 语法，然后如果它仍然无法按预期运行，请更新您的问题。
另外，将value 设置为等于您的模型没有意义。您不希望每个下拉列表的值都等于您的模型....

标签： angularjs select angularjs-ng-change

【解决方案1】：

使用$scope.$apply 让AngularJS 框架知道范围变量的变化。

    pdfMake.createPdf(doc).getDataUrl(function(dataURL) {
        $scope.fajll= dataURL;
        $scope.$apply();
    });

作为.getDataURl 方法的参数提供的函数正在AngularJS 框架之外异步执行。对象元素的data 属性仅在摘要周期后更新。 $scope.$apply 创建必要的摘要循环。

【讨论】：