HTMLとAngularJSのトグルボタン

Question

サンプルアプリケーションを実装しており、Twitterのようなフォローボタンを実装する必要があります。

次のように私はng-click関数は、DBテーブルを処理し、また、ボタンのUIを切り替え

<button class="btn pull-right{{setButtonStyle(S.Id)}}" 
ng-class="{true:'btn-primary', false:'btn-secondary'}[!S.isFollow]" 
ng-click="toggleFollow(S.Id)"> {{!S.isFollow && 'Follow' || 'Unfollow'}} 
</button> 

、ボタンを符号化しています。

$scope.toggleFollow = function (userId) { 
    var element = $scope.followIds.indexOf(userId); 
    if (element == -1) { 
     // Follow user 
     $scope.Searched[Sindex].isFollow = !$scope.Searched[Sindex].isFollow; // Toggles the button 
     console.log("Follow called"); 
     }) 
    } else if (element > -1) { 
     // Unfollow user 
     $scope.Searched[Sindex].isFollow = !$scope.Searched[Sindex].isFollow; // Toggles the button 
     console.log("Unfollow called"); 
     }) 
    } 
} 

問題はボタンがランダムに切り替わらないことです。ボタンをクリックするたびにAngularJSダイジェストループが起動しないと思われます。

ボタンがクリックされるたびにAngular関数が呼び出されることは確かです。トグルだけが期待どおりに発射されません。では、クリックするたびにボタンをどのように切り替えるのですか？あなたのケースでは

Answer 1

、その最高のは、使用するの角度$が適用されます（）

$が適用されます - そう、最初にいくつかのコードを実行し、その後方法内部$ダイジェストを（）を呼び出すために使用されますすべて時計がチェックされ、対応するウォッチリスナー機能が呼び出されます。

これは2通りの方法で行います。

最初のアプローチ - $、あなたのボタンの実装コードの末尾に引数せずに、）（例えば、下記のような

$scope.toggleFollow = function (userId) { 
    if (element == -1) { 

     //...your button's implementation code 

    } 
    else if (element >= -1) { 

     //....your button's implementation code 

    } 

    //Call $apply() 
    $scope.$apply(); 

} 

を適用する第二のアプローチ（お奨め）を使用する - ボタンの実装を書きますファンクションの中にあるコード（$ applyのパラメータとして渡されるファンクション）が最初に実行され、1つのファンクションが終了すると、AngularJSは$ digest（）を s $の詳細については、すべての時計は見ての値の変化をチェックされ、O。..

$scope.toggleFollow = function (userId) { 

    //Call $apply() ,passing the function as parameter 
    $scope.$apply(function(){ 
     if (element == -1) { 

      //...your button's implementation code 

     } 
     else if (element >= -1) { 

      //....your button's implementation code 

     } 
    }); 
} 

はthisドキュメントを参照してください、適用されます。それはあなたにそれのより良い理解と働きを与えるでしょう。

これがうまくいくと思います。

乾杯