AngularJs $ scope。$ apply不按预期工作

时间:2021-07-23 15:05:48

I am using this controll: http://blueimp.github.io/jQuery-File-Upload/angularjs.html to do file uploading in angular, once the file is uploaded to my server I return a url and would like to display it to the client on the success callback. The plugin being used is just a normal jquery file upload but there is a angular directive wrapper provided which I'm using.

我正在使用这个控件:http://blueimp.github.io/jQuery-File-Upload/angularjs.html以角度进行文件上传,一旦文件上传到我的服务器我返回一个网址并希望显示它成功回调给客户端。正在使用的插件只是一个普通的jquery文件上传,但我提供了一个角度指令包装器。

Here's how I define the callback:

这是我如何定义回调:

$scope.options = {
    url: '/api/Client/',
    type: 'PUT',
    done: function (event, data) {
        var scope = angular.element(this).scope();
        scope.test = "doesn't work";
        scope.$apply(function () {
            scope.test = "this doesn't work either";
        });
    }
};

The file uploads fine, and the done function is called however I am unable to update the view. I initially tried by just changing scope, then I realised I would require the $apply() function but that isn't working either.

文件上传很好,并且调用了done函数但是我无法更新视图。我最初尝试只是改变范围,然后我意识到我需要$ apply()函数,但这也不起作用。

I have also tried

我也试过了

$scope.options = {
    url: '/api/Client/',
    type: 'PUT',
    done: function (event, data) {
        $scope.test = "doesn't work";
        $scope.$apply(function () {
            $scope.test = "this doesn't work either";
        });
    }
};

and that also doesn't work. I am not sure why it isn't updating my view, and as the done call is just an ajax success event I don't see how this specific plugin could be causing any issues with $scope.$apply. I am using AngularJs 1.1.5, but I have also tried 1.0.7 and am getting the same issue.

这也行不通。我不确定为什么它不更新我的视图,因为完成调用只是一个ajax成功事件,我没有看到这个特定的插件如何导致$ scope的任何问题。$ apply。我正在使用AngularJs 1.1.5,但我也尝试过1.0.7并且遇到了同样的问题。

2 个解决方案

#1


11  

Copied from my comment to make it clearer what the problem was:

从我的评论复制,以使问题更清楚:

I managed to figure out the problem. When using their example I had a duplicate of ng-controller(Their example was nested within my other controller) and even though both were using the same controller it seems like it would only update anything that was within nested controller scope. When removing the duplicate ng-controller attribute it all works fine.

我设法弄清楚了问题。当使用他们的例子时,我有一个ng-controller的副本(他们的例子嵌套在我的另一个控制器中),即使两个都使用相同的控制器,它似乎只会更新嵌套控制器范围内的任何东西。删除重复的ng-controller属性时,一切正常。

#2


1  

I thought I would chime in too, as I've spent a whole day dealing with this issue.

我以为我也会参与其中,因为我花了一整天来处理这个问题。

Make sure that in your HTML, you apply the ng-controller to a div wrapper, not a ul element.

确保在HTML中,将ng-controller应用于div包装器,而不是ul元素。

#1


11  

Copied from my comment to make it clearer what the problem was:

从我的评论复制,以使问题更清楚:

I managed to figure out the problem. When using their example I had a duplicate of ng-controller(Their example was nested within my other controller) and even though both were using the same controller it seems like it would only update anything that was within nested controller scope. When removing the duplicate ng-controller attribute it all works fine.

我设法弄清楚了问题。当使用他们的例子时,我有一个ng-controller的副本(他们的例子嵌套在我的另一个控制器中),即使两个都使用相同的控制器,它似乎只会更新嵌套控制器范围内的任何东西。删除重复的ng-controller属性时,一切正常。

#2


1  

I thought I would chime in too, as I've spent a whole day dealing with this issue.

我以为我也会参与其中,因为我花了一整天来处理这个问题。

Make sure that in your HTML, you apply the ng-controller to a div wrapper, not a ul element.

确保在HTML中,将ng-controller应用于div包装器,而不是ul元素。