带有 ng-repeat 的 md-icon md-svg-src 上的 Angular ng-mouseover 不起作用答案

【问题标题】：Angular ng-mouseover on md-icon md-svg-src with ng-repeat doesn't work带有 ng-repeat 的 md-icon md-svg-src 上的 Angular ng-mouseover 不起作用
【发布时间】：2017-04-14 15:25:23
【问题描述】：

我对这部分代码有一个错误：

$scope.btns = {
            'telechargement': "assets/img/btns/Btn_telechargement.svg",
            'telechargement_hover': "assets/img/btns/Btn_telechargement-hover.svg"
        };

        $scope.setSessionDownloadHover = function(index){
            $scope.sessions_online[index].btn_download = $scope.btns.telechargement_hover;
        };

        $scope.setSessionDownloadLeave = function(index){
          $scope.sessions_online[index].btn_download = $scope.btns.telechargement;
        };

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<md-table-container ng-show="sessions_online.length > 0">
                    <table md-table md-progress="promise">
                        <thead md-head>
                        <tr md-row>
                            <th md-column >Nom de la séance</th>
                            <th md-column >Nom de la session</th>
                            <th md-column >Date de la session</th>
                            <th md-column ></th>
                        </tr>
                        </thead>
                        <tbody md-body>
                        <tr md-row ng-repeat="session in sessions_online">
                            <td md-cell>{{ session.seance_name }}</td>
                            <td md-cell>{{ session.name }}</td>
                            <td md-cell class="bold">{{ session.date | date: 'dd/MM/yyyy' }}</td>
                            <td md-cell>
                                <md-icon class="cursor-pointer"
                                         tabindex="{{$index}}"
                                         ng-click="downloadSessionFromId(session.id)"
                                         md-svg-src="{{session.btn_download}}"
                                         ng-init="session.btn_download = btns.telechargement;"
                                         ng-mouseover="setSessionDownloadHover($index)"
                                         ng-mouseleave="setSessionDownloadLeave($index)"
                                         style="width: 38px; height: 38px;">
                                    <md-tooltip md-direction="left">
                                        {{$index}} -
                                        Télécharger le contenu de la session sur cet ordinateur
                                    </md-tooltip>
                                </md-icon>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </md-table-container>

每个 md 图标都会在鼠标悬停时更改为 svg。但问题是当我将鼠标放在一个 md 图标上时，svg src 会更改但未应用。当我将鼠标放在最后一个 md 图标上时，它的 svg src 发生了变化，视图中的所有 svg 都发生了变化，但代码中没有。

你对此有解释吗？

谢谢。

【问题讨论】：

标签： angularjs svg ng-repeat

【解决方案1】：

我的问题已经解决了

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<span
      class="cursor-pointer margin-left-10"
      ng-init="link_help = 'assets/img/btns/Btn_aide.svg'"
      ng-mouseover="link_help = 'assets/img/btns/Btn_aide-hover.svg'"
      ng-mouseleave="link_help = 'assets/img/btns/Btn_aide.svg'">
  <img src="{{link_help}}" type="img/svg+xml" width="40" height="40"/>
  <md-tooltip md-direction="right" tooltip-class="tooltip">
    <p>En cliquant sur les liens ci-dessous, vous serez redirigé directement sur la plateforme de gestion MRS</p>
  </md-tooltip>
</span>

我认为是 md-icon 或 md-icon: md-svg-src 的属性导致了问题。

【讨论】：