将 facebook 页面列表更新为下拉列表

Question

我正在开发一个与 Facebook 集成的 angular 应用程序。我已经给出了下面的代码，

$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

Always wrap 3rd party API call-backs in to $apply to notify AngularJS regarding out of environment changes.

将 facebook 页面列表更新为下拉列表

Update facebook page list in to a drop down list

asp.net-mvc

facebook-javascript-sdk

angularjs