Toggle-Taste in HTML und AngularJS

Question

Ich bin eine Beispielanwendung implementieren und ich muss eine Follow-Taste ähnlich der in Twitter implementieren.

ich den Knopf codiert sind wie folgt,

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

Die ng-click Funktion übernimmt die DB-Tabellen und schaltet auch auf die Schaltfläche UI. Es ist wie folgt,

$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"); 
     }) 
    } 
} 

Das Problem ist, dass die Schaltfläche nicht zufällig umgeschaltet wird. Ich vermute, dass die AngularJS-Digest-Schleife nicht jedes Mal ausgelöst wird, wenn auf die Schaltfläche geklickt wird.

Ich weiß sicher, dass die Angular-Funktion jedes Mal aufgerufen wird, wenn auf die Schaltfläche geklickt wird. Daher wird nur der Schalter nicht wie erwartet ausgelöst. Wie zwinge ich die Taste, jedes Mal, wenn es geklickt wird, zu drücken?

Answer 1

In Ihrem Fall seine besten eckiges zu verwenden $ gelten()

$ gelten - verwendet wird, einen Code auf den ersten auszuführen, und dann rufen Sie die $ Digest() Methode intern, so dass alle Uhren überprüft werden und die entsprechenden Uhr Listener-Funktionen aufgerufen werden.

Sie machen dies auf zwei Arten möglich.

Erster Ansatz - verwenden $ apply() ohne Argumente am Ende Ihres Implementierungscode der Taste, wie unten Beispiel

$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(); 

} 

Second Approach (empfohlen) - schreiben die Umsetzung der Taste Code innerhalb der Funktion (dh.die Funktion, die als Parameter an $ übergeben wird), so dass die Funktion zuerst ausgeführt wird, und eine Funktion beendet, wird AngularJS die $ digest(), s aufrufen o dass alle Uhren sind für die Veränderungen der beobachteten Werte überprüft ..

$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 

     } 
    }); 
} 

Für weitere Informationen über $ gelten finden this Dokument. Es würde Ihnen ein besseres Verständnis und Arbeit davon geben.

Hoffe, dass dies hilft.

Prost