Angular ng-hide/ng-show 指令不起作用答案

【问题标题】：Angular ng-hide/ng-show directives not workingAngular ng-hide/ng-show 指令不起作用
【发布时间】：2017-10-21 19:30:20
【问题描述】：

我有一个问题出现在 Android 4.x 设备上，但在较新的设备上没有。我不知道为什么，但我希望有人能提供帮助。

我有一个使用ng-repeat 的列表。每个项目都使用ng-include 动态加载模板（这是一个通用的、可重复使用的对话框）。

<ons-list-item ng-repeat="item in items | filter:filterItems(searchTerm) as filtered" ng-click="options.selectItem(item)" style="font-size: 14px; padding: 0;" tappable>
  <div class="left" style="width: 100%;">
    <ng-include src="'app/dialog/smartpick/'+options.itemTemplate" style="width: 100%; padding: 0px 16px;"></ng-include>
  </div>
</ons-list-item>

当前导致我出现问题的模板包含这样的按钮：

<ons-button ng-click="openDocument(item, $event)" ng-if="item.SpecificationSpecDocumentID" style="float: right;font-size: 20px !important; padding: 0px 10px;">
    <ons-icon icon="ion-image" ng-hide="item.opening" style="vertical-align: middle;"></ons-icon>
    <ons-icon icon="ion-load-b" ng-show="item.opening" class="spin" style="vertical-align: middle;"></ons-icon>
</ons-button>
Debug: {{ item.opening }}

当openDocument 被调用时，它会这样做（除其他外）：

if(item.opening) return; 
item.opening = true;

当列表被渲染时，两个<ons-icon> 元素都会被显示； ng-show/ng-hide 指令似乎没有做任何事情。按钮下的调试文本分别显示真假，但图标元素没有添加类或样式。（我还尝试通过将指令移动到包装器 <span> 元素来隔离问题，但它没有任何效果。）

正如我之前所说，这在较新的设备上运行良好。关于什么可能导致指令在旧设备上失败或被忽略的任何线索？

编辑

这肯定与在<ons-button> 元素内创建的子作用域有关，因为指令在该作用域之外工作。我只是不知道为什么它会在较新的 webviews 中起作用，但在旧的 webviews 中不起作用。

【问题讨论】：

标签： javascript android angularjs

【解决方案1】：

我仍然不知道浏览器版本与它有什么关系，但问题似乎是在我的模板中使用 ng-if 的结果。当我将它们更改为ng-show时，问题就消失了。

【讨论】：