javascript - AngularJS 1.6:在 Controller 函数中不可见(未定义)以HTML格式打印的对象

用户单击文件上传按钮，该按钮在HTML中定义如下：

<input
            type="file"
            fileread
            style="display: none;">

选择文件后，此“ fileread”指令运行：

app.directive("fileread", [ function() {
    return {
        link : function(scope, element, attributes) {
            element.bind("change", function(changeEvent) {
                var reader = new FileReader();
                reader.onload = function(loadEvent) {
                    scope.$apply(function() {
                        scope.myCroppie = new Croppie();
                        console.log(scope.myCroppie); // <-- prints correctly
                    });
                }
                reader.readAsDataURL(changeEvent.target.files[0]);
            });
        }
    }
} ]);

请注意如何为scope.myCroppie分配一个值。

在HTML {{myCroppie}}中会立即打印出来。所以那没问题。

现在;在控制器中定义的同一页面，一个按钮及其ng-click功能：

$scope.doStuff = function() {
    console.log($scope.myCroppie));
}

控制台输出未定义。

我还在指令中尝试了“ scope：true”，但没有成功。控制器中的函数仍然看不到$ scope.myCroppie，它是在指令的“链接”函数内部创建的。

有办法使这项工作吗？
提前致谢 ！

最佳答案

它应该可以正常工作：https://jsfiddle.net/0aextp1e/
（同样，您应该尝试自己创建这种提琴，以便在提出问题之前首先隔离问题。）

但是为什么它不起作用？除非您在代码中的其他范围内，否则它应该可以正常工作。现在，我不知道代码的其余部分是什么，但是该输入可能在另一个directive内部，该{{myCroppie}}创建另一个子级或隔离范围。这也说明了如何打印{{myCroppie}}但无法在控制器中访问它。您可能将放在指令中。像这样：https://jsfiddle.net/1rbt1zkg/1/

第二个插入符中的指令会进行包含，因此具有另一个隔离的范围。检查是否是这种情况。