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创建子范围。试试这个测试 - 暂时从你的桌子上剪下ng-if。现在，当您单击按钮时，段落和表格都应隐藏。您是否可以将ng-if条件合并到表格中？

Answer 2

那是因为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>

N-hide隐藏在ng-click元素之外

2 个答案: