Question

我有一个问题出现在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指令似乎没有做任何事情。按钮下的调试文本分别显示true或false，但不会向图标元素添加类或样式。（我也尝试通过将指令移到包装器<span>元素来隔离问题，但它没有任何效果。）

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

修改

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

Answer 1

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

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

1 个答案: