javascript - Ng-隐藏在 ng-click 元素之外

Question

我正在使用 ng-hide 来隐藏提示。 ng-click 按钮在表格中。当我单击 ng-click 按钮时，它隐藏了表格。当我在 table 外面也有一个 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 标签中的内容仍然存在。当我将它移到 table 外面时，两者都会隐藏起来。我喜欢表格中的格式，但看不出到底是什么原因造成的。

Answer 1

那是因为 ng-if 创建了一个新的作用域。尝试使用对象而不是基元。意思是，您可以不使用 dismiss，而是执行类似于此的操作:

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>