Ng-verstecken außerhalb ng-klicken Sie Elemente

Question

Ich benutze ng-ausblenden, um eine Eingabeaufforderung zu verstecken. Die ng-klick-Schaltfläche befindet sich in einer Tabelle. Wenn ich auf die ng-klick-Taste klicke, wird die Tabelle ausgeblendet. Das Problem kommt, wenn ich auch eine ng-hide außerhalb der Tabelle habe. Ein Klick auf den ng-click hat keine Auswirkungen auf das ng-hide. Unten ist ein Beispiel.

<p ng-hide="dismiss"><b>We found the below information on your social media profile. Would you like to import it into your information below?</b></p> 

<table ng-hide="dismiss" ng-if="auth0.user.provider == 'instagram' || auth0.user.provider == 'google-oauth2'" class="application {{auth0.user.provider}}"> 
<tr> 
    <td><img class="circle" src="{{auth0.user.picture}}"/></td> 
    <td>{{auth0.user._json.name}}, unfortunatly {{auth0.user.provider}} does not provide enough data to import, please fill in below.</td> 
    <td><button ng-click="dismiss = true">Dismiss</button></td> 
</tr> 
</table> 

Die Tabelle wird ausgeblendet, aber der Inhalt im p-Tag bleibt erhalten. Wenn ich es außerhalb des Tisches bewege, werden beide sich verstecken. Ich mag die Formatierung in der Tabelle und kann nicht sehen, was genau das verursacht.

Answer 1

Das ist, weil ng-if einen neuen Bereich erstellt. Versuchen Sie, Objekte anstelle von Primitiven zu verwenden. Das heißt, statt dismiss verwenden, könnten Sie etwas ähnliches tun:

Controller:

$scope.control = {}; 

HTML:

<p ng-hide="control.dismiss"><b>We found the below information on your social media profile. Would you like to import it into your information below?</b></p> 

<table ng-hide="control.dismiss" ng-if="auth0.user.provider == 'instagram' || auth0.user.provider == 'google-oauth2'" class="application {{auth0.user.provider}}"> 
<tr> 
    <td><img class="circle" src="{{auth0.user.picture}}"/></td> 
    <td>{{auth0.user._json.name}}, unfortunatly {{auth0.user.provider}} does not provide enough data to import, please fill in below.</td> 
    <td><button ng-click="control.dismiss = true">Dismiss</button></td> 
</tr> 
</table> 

Answer 2

ng-if erstellt einen untergeordneten Bereich. Versuchen Sie diesen Test - schneiden Sie die ng-if von Ihrem Tisch vorübergehend. Nun sollten sowohl der Absatz als auch die Tabelle ausgeblendet werden, wenn Sie auf die Schaltfläche klicken. Könnten Sie die ng-if-Bedingungen möglicherweise in das ng-hide der Tabelle einfügen?