2016-03-29 10 views
0

facebookと統合された角度アプリに取り組んでいます。私は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-クリック)イベントで呼び出され、応答が戻ってきたときに、ドロップダウンデータで更新する必要があり、以下のコードを与えています。データは戻ってきますが、すぐに更新されるのではなく、ドロップダウンリストを更新するためにページ内のどこか別の場所をクリックする必要があります。

答えて

1

最初にng-clickを実行すると、モデルのデータが更新されます。しかし、AngualrJSはチェックを行わないため、ビューに古いデータが表示される可能性があります。 $digest()を強制的にチェックして、AngalrJSに古いデータと新しいデータを比較させ、違いがあれば更新するように伝えることができます。 $timeout$evalAsync、または$applyを使用して、すぐにデータを更新する$digest()をトリガーすることができます。例えば

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

編集:常に環境の変化のうち、に関するAngularJS に通知するために適用されます$にしてサードパーティのAPIコールバックを包むAngular JS best coding practice

によります。

+0

ありがとうございます。 $ scope。$ applyAsync(function(){ }); – Joshua

+0

@ジョシュア喜んで助ける – NMSL

関連する問題