angularjs 控制器中用Promise初始化数据时,model绑定不成功。

发布于 2022-09-06 15:42:39 字数 3495 浏览 29 评论 0

在controller的初始化数据方法里用Promise绑定数据

controller init方法中,用storage返回的Promise初始化数据:

        storage.getCategoryList().then(function (res) {
            $scope.categoryList = res;
        });

storage组件中,先从sessionStorage中取数据,没取到再用APIService调接口从后台取数据,再将结果返回:

storage.getCategoryList = function () {
        return new Promise(function (resolve, reject) {
            let categoryList = sessionStorage.getItem('categoryList');
            if(categoryList == null || categoryList === undefined){
                APIService.getCategoryList().then(function (res) {
                    if(res.data.httpStatus === 200){
                        categoryList = res.data.categoryList;
                        sessionStorage.categorylist = categoryList;
                        resolve(categoryList);
                    }else{
                        reject();
                    }
                });
            }else{
                resolve(categoryList)
            }
        })
    }

前端html:

<div class="form_items_content_input form_items_content input-group">
                <input type="text" class="form-control" name="category" ng-model="category">
                <div class="input-group-btn">
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                        选择分类
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu">
                        <li ng-repeat="a in categoryList" ng-click="bindingCategory(a)"><a>{{a}}</a></li>
                    </ul>
                </div><!-- /btn-group -->
            </div>

这样子取数据后,categroyList绑定失败:

clipboard.png

将controller init方法改为直接从后台取数据却能成功:

APIService.getCategoryList().then(function (res) {
            if(res.data.httpStatus === 200){
                $scope.categoryList  = res.data.categoryList;
            }
        })

clipboard.png

在前面的方法中调用一次$apply更新数据也能成功:

storage.getCategoryList().then(function (res) {
            //此处直接赋值,数据无法绑定到view,需用$apply
            $scope.$apply(function () {
                $scope.categoryList = res;
            })
        });

于是我就想到可能是因为angularjs数据绑定已经完成了,第一种方法比较慢,还没将值赋给$scope.categoryList,才导致绑定失败,就将两种方法的执行时间比较了一下:

let start = new Date()
        storage.getCategoryList().then(function (res) {
            //此处直接赋值,数据无法绑定到view,需用$apply
            $scope.$apply(function () {
                $scope.categoryList = res;
                console.log(new Date().getTime() - start.getTime())
            })
        });
let start = new Date()
        APIService.getCategoryList().then(function (res) {
            if(res.data.httpStatus === 200){
                $scope.categoryList  = res.data.categoryList;
                console.log(new Date().getTime() - start.getTime())
            }
        })

结果发现前面的方法执行时间大概率优于后者,所以感到十分好奇,为什么前面的方法没法绑定数据,必须得用$apply才行??

有没有大神能帮忙解答一下这问题,感激不尽!

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

绿萝 2022-09-13 15:42:40

脱离angular上下文,需要使用$apply强制数据同步??
在angular中调用非scope下的函数,如window下的方法,也是需要$apply才能够强制同步

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文