Question

我正在创建一个带有angularjs的日志查看器，它必须在IE10中工作每个列表项都包含折叠的详细信息。单击SVG图标将展开详细信息。

部分HTML，包含和不使用angularjs来更改图标：

<!DOCTYPE html>
<html>
  ...  
  <body data-ng-app="listViewer">
    <div>
      <svg width="0" height="0">
        <defs>
          <mask maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox" id="arrowdwn">...</mask>
          <mask maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox" id="arrowup">...</mask>
        </defs>

        <symbol id="expand">
          <circle class="expand" cx="10" cy="10" r=8 stroke-width="1" stroke="#dddddd" fill="#aaaaaa" mask="url(#arrowdwn)" />
        </symbol>

        <symbol id="collapse">
          <circle class="expand" cx="10" cy="10" r=8 stroke-width="1" stroke="#dddddd" fill="#aaaaaa" mask="url(#arrowup)" />
        </symbol>
      </svg>
    </div>
      ...
      <br /> This does <b>not</b> work in IE (switch the icon on click, using <b>angular.js</b>)
      <br /> It seems as if after the first click, all click events are removed (even on Plunker):
      <div class="item" data-ng-repeat="item in list.items">
        {{ item.name }}
        <svg width="20" height="20" data-ng-init="expand[item.id]=false" data-ng-click="expand[item.id] = !expand[item.id]">
          <use xlink:href="{{ expand[item.id] ? 'collapse' : 'expand' | svgIconHref }}" />
        </svg>
        <div class="detail" data-ng-show="expand[item.id]">
          list item details for {{ item.name }}
        </div>
      </div>
      <br />
      <br /> This does NOT work in IE (switch the icon on click, using <b>javascript setAttributeNS</b>)
      <br /> It seems as if after the first click, all click events are removed (even on Plunker):
      <div class="item" data-ng-repeat="item in list.items">
        {{ item.name }}
        <svg width="20" height="20" id="svg{{ item.id }}" onclick="javascript:expandcollapse(this);">
          <use id="icon{{ item.id }}" xlink:href="#expand" />
        </svg>
        <div id="details{{ item.id }}" class="detail" style="display: none">
          list item details for {{ item.name }}
        </div>
      </div>
    </div>
  </body>
</html>

javascript：

(function() {
  var listViewer = angular.module('listViewer', []);

  // add a filter to allow concatenation of '#' and status for the svg 'use' href
  listViewer.filter('svgIconHref', function($sce) {
    return function(iconId) {
      return $sce.trustAsResourceUrl('#' + iconId);
    };
  });

  listViewer.controller('listController', [function() {
    var list = this;
    list.items = [{
      "id": 1,
      "name": "first item"
    }, {
      "id": 2,
      "name": "second item"
    }];
  }]);
}());


function expandcollapse(parent) {
  var id = parent.id.slice(-1);
  var icon = document.getElementById('icon' + id);
  var details = document.getElementById('details' + id);

  var hrf = icon.getAttributeNS("http://www.w3.org/1999/xlink", "href");
  hrf = hrf == '#expand' ? '#collapse' : '#expand';

  icon.setAttributeNS("http://www.w3.org/1999/xlink", "href", hrf);
  details.style.display = hrf == "#expand" ? "none" : "block";
}

我创建了一个Plunker来展示我正在尝试做的事情。

所有选项均适用于FF和Chrome，但在IE中更改xlink：href关闭图标似乎会删除所有点击事件。

任何有关此工作的建议都将不胜感激现在，我正在使用一个使用2个图标的方法，并隐藏未使用的图标虽然更新可以有5种口味的状态图标时，这将变得很痛苦......

干杯，
玛蒂

Answer 1

与here

相同

他们使用指针事件的技巧：没有对我不起作用。我看不到解决方案

更改svg <use>标记中的xlink：href会冻结Internet Explorer中的所有输入

1 个答案: