AngularJs-指令不更新控制器变量

Question

在开始之前，我只想说我对这个问题做了完整的google / stackoverflow搜索，但找不到任何有帮助的方法。

所以，有了我们这些，这就是我的问题：

我有此指令，该指令应返回在简单输入类型文件中选择的数据。 在我的console.log中 ，数据输出正常，但是当我在控制器中观察值更改时，它根本就不会执行。

这是我的指令：

app.directive('esFileRead', [
    function () {
        return {
            restrict: 'A',
            $scope: {
                esFileRead: '='
            },
            link: function ($scope, $elem) {
                $elem.bind('change', function (changeEvent) {
                    if (FileReader) {
                        var reader = new FileReader();
                        reader.onload = function (loadEvent) {
                            $scope.$apply(function () {
                                $scope.esFileRead= loadEvent.target.result;
                                console.log($scope.esFileRead);
                            });
                        };
                        reader.readAsDataURL(changeEvent.target.files[0]);
                    }
                    else {
                        // FileReader not supported
                    }
                });
            }
        }
    }
]);

我的控制器：

app.controller('MainController', [
    '$rootScope',
    '$scope',
    'DataManagementService',
    function ($rootScope, $scope, DataManagementService) {
        $scope.importFile = "";

        $scope.$watch('importFile', function (newValue, oldValue) {
            console.log(newValue);
            if(newValue && newValue !== oldValue) {
                DataManagementService.importData(newValue);
            }
        });

    }
]);

我的观点：

<input id="btnImport" type="file" es-file-read="importFile"/>

Answer 1

您似乎在指令定义对象中被打错了，其中$scope应该是scope 。

---

我想提出几点建议来改进您当前的方法，而不是在父控制器方法中使用watcher 。 您应该将回调传递给指令，并在读取器对象加载完成后立即调用它。 事实证明，您的隔离范围将如下所示

restrict: 'A',
scope: {
    callback: '&'
},

然后将新方法放入控制器中，我们将在其中将文件数据传递给该方法。

$scope.importData = function(data) {
    DataManagementService.importData(newValue);
});

然后从元素正确通过指令回调方法

<input id="btnImport" type="file" es-file-read callback="importData(data)"/>

从指令代码正确调用方法。

reader.onload = function (loadEvent) {
    $scope.$apply(function () {
        $scope.esFileRead= loadEvent.target.result;
        $scope.callback({ item: $scope.esFileRead });
    });
};