角不更新伍级时变被触发 [英] Angular not updating Ng-class when on-change is triggered

问题描述

有角有一个奇怪的问题。我能得到这个与NG-点击工作，但我需要使用的onchange其他原因。

我的code似乎是工作的罚款，其他按钮，可以pssed触发同一code $ P $但是当涉及到​​我的上传按钮决定不即使更新纳克级scope.slideMenu实际上是注销为真。

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

继承人的code：

HTML

 ＆LT; D​​IV CLASS =应用程序，滑动菜单
                     NG-CLASS ={应用程序菜单主动：slideMenu}＆GT;                    ＆LT;窗​​体类=应用程序设置的图像文件格式＆GT;
                        ＆LT;标签类=应用程序文件输入
                               标题=上传图片＆GT;
                            ＆LT; I类=图标，进入＆GT;＆LT; I＆GT /;
                            ＆LT;输入类型=文件
                                   的onchange =angular.element（本）.scope（）。setImageFile（本）
                                   接受=图像/ *＆GT;
                        ＆LT; /标签＆gt;
                    ＆LT; /表及GT;
                ＆LT; / DIV＆GT;
 

现在的JS：

  scope.setImageFile =功能（元素）{
        VAR读卡器=新的FileReader（）;        //将图像转换为数据的URL。
        reader.readAsDataURL（element.files [0]）;
        scope.slideMenuToggle（）;        / **
         *当选择选择的图像它触发的onload功能将图像传递到whiteboardService。
         * @参数事件 - 保存输入字段的事件获得的图像数据的URL。
         * /
        reader.onload =函数（事件）{
            fabric.Image.fromURL（event.target.result，功能（IMG）{
                whiteboardService.uploadImageToCanvas（IMG）;
            }）;            //重新设置一个封装轮文件输入形式，允许
            //用户添加同一文件的多个。
            //注意：这将打破其他投入，如果你把他们这种形式里面
            $（'应用程序设置图像文件格式）的触发器（重置）。
        };
    };
 

和简单的切换JS：

  scope.slideMenuToggle =功能（）{
        scope.slideMenu = scope.slideMenu！;
    };
 

解决方案

使用 ngChange 。 的onChange 仍是JavaScript的的onChange 这是采用了棱角分明了。当您使用的onChange ，角不知道事情发生了变化。

这是罕见的情况下，调用 $范围之一。$适用（）将需要（当使用的onChange ）

Got an odd problem with angular. I can get this to work with ng-click but I need to use onchange for other reasons.

My code seems to be working fine for other buttons that can be pressed to trigger the same code but when it comes to my upload button it decides not to update the ng-class even though scope.slideMenu is actually logged out as true.

I would also like to close the menu when the user has finished choosing an image/file if someone could help with that as well.

Heres the code:

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>

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

And the simple toggle JS:

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

解决方案

Use ngChange. onChange is still the JavaScript onChange it was before using Angular. When you use onChange, Angular doesn't know things have changed.

This is one of the rare cases calling $scope.$apply() would be needed (when using onChange)

这篇关于角不更新伍级时变被触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！