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 });
    });
};

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

1 个答案: