ng-click要素の外側のNg-hide

Question

ng-hideを使用してプロンプトを非表示にしています。 ng-clickボタンはテーブル内にあります。 ng-clickボタンをクリックすると、テーブルが非表示になります。問題は、テーブルの外側にng-hideもある場合です。 ng-clickをクリックしても、ng-hideには何の影響もありません。以下は例です。

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

表は非表示になりますが、pタグの内容は残ります。私がテーブルの外にそれを移動すると、両方が隠れるでしょう。私はテーブルの中でそれのフォーマットが好きで、正確にこれを引き起こしているのか分かりません。

Answer 1

これは、ng-ifが新しいスコープを作成するためです。プリミティブの代わりにオブジェクトを使用してみてください。代わりにdismissを使用するのでは、意味、あなたはこれに似た何かができる：

コントローラー：

$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は、子スコープを作成します。このテストを試してください。テーブルからng-ifを一時的に切断してください。ボタンをクリックすると段落と表の両方が非表示になります。おそらくng-if条件をテーブルのng-hideに組み合わせることができますか？