一旦 ng-show div 移出整个 div，ng-click 将不起作用

Posted 2023-02-19

【中文标题】一旦 ng-show div 移出整个 div，ng-click 将不起作用

【英文标题】：ng-click doesn't work once ng-show div is moved out of overall div

【发布时间】：2018-06-20 01:39:05

【问题描述】：

我有一个显示/隐藏另一个部分的 ng-click，它都在同一个整体 div 中。我想将显示/隐藏部分移动到它自己的 div，但是这样做时，ng-click 不再起作用。我当前有效的代码如下所示：

<div class="container">
  <div class="child" ng-repeat="item in c.list | unique: 'workflow_stage' track by $index">
    <div class="at-work-process position-relative overflow-hidden text-center">
            <div class="at-work-process-text">
        <span class="at-work-process-number">$index+1</span>
        <span class="at-work-process-number-text">item.workflow_stage</span>
        <div class="at-separator-thick"></div>
      </div>
      <div ng-click="showDetails = ! showDetails" class="at-work-process-details">
        <i ng-if="!data.allComplete" class="material-icons" style="color:#d32f2f;">error</i><span ng-if="!data.allComplete">Incomplete</span>
                <i ng-if="data.allComplete" class="material-icons" style="color:#81c784;">check_circle</i><span ng-if="data.allComplete">Complete</span>
      </div>
    </div> 

    <div ng-show="showDetails" class="text-center">
        <h3>item.workflow_stage Tasks:</h3>
        <ul style="list-style:none; padding-left:0; display:inline-block">
        <li ng-repeat="tasks in c.list" style="display:flex; align-items:center;">
          <i class="material-icons" style=tasks.style>tasks.icon</i><a href="tasks.url" target="_blank">tasks.short_description</a>
        </li>
      </ul>
    </div>
    </div>
</div>

我想要的是这样的：

<div class="container">
  <div class="child" ng-repeat="item in c.list | unique: 'workflow_stage' track by $index">
    <div class="at-work-process position-relative overflow-hidden text-center">
            <div class="at-work-process-text">
        <span class="at-work-process-number">$index+1</span>
        <span class="at-work-process-number-text">item.workflow_stage</span>
        <div class="at-separator-thick"></div>
      </div>
      <div ng-click="showDetails = ! showDetails" class="at-work-process-details">
        <i ng-if="!data.allComplete" class="material-icons" style="color:#d32f2f;">error</i><span ng-if="!data.allComplete">Incomplete</span>
                <i ng-if="data.allComplete" class="material-icons" style="color:#81c784;">check_circle</i><span ng-if="data.allComplete">Complete</span>
      </div>
    </div> 
  </div>
</div>

    <div ng-show="showDetails" class="text-center">
        <h3>item.workflow_stage Tasks:</h3>
        <ul style="list-style:none; padding-left:0; display:inline-block">
        <li ng-repeat="tasks in c.list" style="display:flex; align-items:center;">
          <i class="material-icons" style=tasks.style>tasks.icon</i><a href="tasks.url" target="_blank">tasks.short_description</a>
        </li>
      </ul>
    </div>

当我将 showDetails 部分移到整个容器 div 之外时，是否有 ng-click 不再起作用的原因？我需要更改什么才能让它再次工作？

【参考方案1】：

我相信对 div 有误解。

<div ng-show="showDetails" class="text-center">
        <h3>item.workflow_stage Tasks:</h3>
        <ul style="list-style:none; padding-left:0; display:inline-block">
        <li ng-repeat="tasks in c.list" style="display:flex; align-items:center;">
          <i class="material-icons" style=tasks.style>tasks.icon</i><a href="tasks.url" target="_blank">tasks.short_description</a>
        </li>
      </ul>
    </div>

在这里您使用 item.workflow_stage，但您正在关闭使用该项目的 div，然后才到达此处。

【讨论】：

感谢您的提示，我注释掉了该行，但它仍然无法正常工作，所以我认为这不会阻止代码工作，但我会牢记这一点。跨度>