javascript - 触发 on-change 时，Angular 不更新 Ng 类

Question

遇到一个关于 Angular 奇怪问题。我可以让它与 ng-click 一起使用，但由于其他原因我需要使用 onchange 。

我的代码似乎对于可以按下以触发相同代码的其他按钮运行良好，但是当涉及到我的上传按钮时，它决定不更新 ng 类，即使scope.slideMenu 实际上已注销为 true 。

如果有人也可以提供帮助，我还想在用户完成选择图像/文件后关闭菜单。

代码如下:

HTML

                <div class="app-slide-menu"
                     ng-class="{'app-menu-active': slideMenu}">

                    <form class="app-set-image-file-form">
                        <label class="app-file-input"
                               title="Upload Image">
                            <i class="icon-enter"></i>
                            <input type="file"
                                   onchange="angular.element(this).scope().setImageFile(this)"
                                   accept="image/*">
                        </label>
                    </form>
                </div>

现在是 JS:

        scope.setImageFile = function (element) {
        var reader = new FileReader();

        // Converts the image to a data URL.
        reader.readAsDataURL(element.files[0]);
        scope.slideMenuToggle();

        /**
         * When chosen image is selected it triggers the onload function to pass the image to the whiteboardService.
         * @param event - Saves the event of the input field to get the images data URL.
         */
        reader.onload = function (event) {
            fabric.Image.fromURL(event.target.result, function (img) {
                whiteboardService.uploadImageToCanvas(img);
            });

            // Resets the form that wraps round the file input to allow the
            // user to add more than one of the same file.
            // NOTE: This will break other inputs if you put them inside this form
            $('.app-set-image-file-form').trigger('reset');
        };
    };

以及简单的切换 JS:

    scope.slideMenuToggle = function () {
        scope.slideMenu = !scope.slideMenu;
    };

Answer 1

使用ngChange。 onChange 仍然是使用 Angular 之前的 JavaScript onChange。当您使用 onChange 时，Angular 并不知道事情已经发生了变化。

这是需要调用 $scope.$apply() 的罕见情况之一(使用 onChange 时)