javascript - HTML 和 AngularJS 中的切换按钮

Question

我正在实现一个示例应用程序，我需要实现一个类似于 Twitter 中的关注按钮。

我对按钮进行了编码，如下所示，

<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>

ng-click 函数处理数据库表并切换按钮 UI。如下，

$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

在你的情况下，最好使用 Angular 的 $apply()

$apply - 用于首先执行一些代码，然后在内部调用$digest()方法，以便所有 watch 检查并调用相应的监视监听器函数。

您可以通过两种方式实现这一目标。

第一种方法 - 在按钮实现代码末尾使用$apply()，不带参数，如下例所示

$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 的函数)内编写按钮的实现代码，这样，该函数首先执行，并且该函数退出，AngularJS 将调用 $digest() ，以便检查所有监视值的变化..

 $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

        }  
     });
}

有关$apply的更多信息，请参阅this文档。它会让您更好地理解和使用它。

希望这对您有所帮助。

干杯