Question

我正在开发一款与facebook集成的角度应用程序。我已经给出了下面的代码，

$scope.getCompanyPages = function () {            
            fb.login(function (response) {
                fb.api('/me/accounts', function (apiresponse) {
                    if (typeof apiresponse !== 'undefined' && typeof apiresponse.data !== 'undefined') {
                        $scope.facebookPages = apiresponse.data;
                        $scope.facebookPages.push({ id: "", name: 'Please select a page' });
                        $scope.selectedItem = $scope.facebookPages[2];
                        console.log($scope.facebookPages);
                    }
                });
            }, { scope: 'manage_pages' });
        };

HTML

<div class="row">
        <div class="col-xs-12 col-sm-6 center">
            <a href="#" ng-click="shareToMyWall()">
                <div class="primary-task">
                    <i class="fa fa-user fa-3x">
                    </i>
                    <h2 class="heading-text fa-bold">Personal Wall</h2>
                </div>
            </a>

        </div>
        <div class="col-xs-12 col-sm-6 center">
            <a href="#" ng-click="getCompanyPages()">
                <div class="primary-task">
                    <i class="fa fa-building fa-3x">
                    </i>
                    <h2 class="heading-text fa-bold">Company Wall</h2>
                </div>
            </a>
            <select ng-if="facebookPages.length > 0" ng-change="shareToFacebookPage(selectedItem.id)" ng-model="selectedItem" ng-options="item.name for item in facebookPages track by item.id"></select>
        </div>
    </div>

在超链接点击（ng-click）事件中调用上述方法，当响应返回时，下拉列表应随数据更新。数据确实会回来，但它不会立即更新，而是我必须在页面的任何位置再次点击以更新下拉列表。

Answer 1

当您执行第一个ng-click时，模型中的数据会更新。但是，AngualrJS可能不会检查，因此视图仍然显示旧数据。您可以强制$digest()检查并告诉AngualrJS比较旧数据和新数据，如果有任何差异则更新它。您可以使用$timeout，$evalAsync或$apply来触发$digest()，它会立即更新数据。

例如：

$timeout(function () {
    $scope.getCompanyPages = function () {...}
    //or
    $scope.facebookPages = apiresponse.data;
})

编辑：根据Angular JS best coding practice

始终将第三方API回调包装到$ apply以通知AngularJS 关于环境变化。

将facebook页面列表更新到下拉列表中

1 个答案: