Question

角度有一个奇怪的问题。我可以使用ng-click来使用它，但我需要使用onchange来解决其他原因。

我的代码似乎可以正常工作，可以按下其他按钮来触发相同的代码但是当涉及到我的上传按钮时，它决定不更新ng-class，即使scope.slideMenu实际记录为true 。

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

下面是代码：

HTML

BufferedReader openFile;
    try{
        openFile = new BufferedReader(new FileReader("LABEX10.txt"));
    }
    catch(FileNotFoundException e){
        System.out.println("Could not open file LABEX10.txt");
        System.exit(0);
    }catch(IOException ex){
        System.err.println(ex);
    }
}

现在为JS：

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

Answer 1

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

这是少数需要调用$scope.$apply()的情况之一（使用onChange时）

Answer 2

我认为你最好的选择是为自定义onchange创建一个angular指令，如下所示：

app.directive('customOnChange', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            var onChangeHandler = scope.$eval(attrs.customOnChange);
            element.bind('change', onChangeHandler);
        }
    };
});

然后您可以在输入中使用它： <input type="file" custom-on-change="setImageFile" accept="image/*">

最后在你的控制器中，你可以这样做：

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

希望这可以提供帮助。

Answer 3

好的，

很抱歉，您的建议对我没有帮助，但我设法找到了解决我的错误的解决方案，但我不明白为什么如此，如果您能告诉我，请告诉我。

我基本上添加了一类＆＃39; js-input-file＆＃39;到输入标签，然后将此代码放在下面以触发范围重置。

        var inputScope = angular.element('.js-input-file').scope();

        inputScope.$apply();

这解决了我的问题，但我无法理解为什么要放置范围。$ apply（）;它本身并没有解决问题，但上述情况确实如此。让我知道你的想法。

Angular在触发更改时不更新Ng类

3 个答案: