我正在我的应用程序中生成 SVG 节点。现在我正在努力向节点添加兼容的 Angularjs 事件。
这个想法很简单。我正在创建一个新的文本 svg 节点,当用户单击此文本元素时,我想打开一个特定的菜单。
但正如预期的那样,“ng-click”事件未被识别。我尝试使用scope.$apply(),但没有成功。所以我想知道使用 $compile 是否正确。但是,即便如此,在以下情况下如何使用 $compile。
这是我的 View ,当用户单击创建一个新节点时。
<div ng-click="addElementToSection(data)">
...
</div>
这是我创建新节点的函数,并在其中指定文本节点的单击事件。 (这里如何使用$compile?会是解决方案吗?)
scope.addElementToSection = function(dataElement, varDefined){
...
var t = s.text(latestPositionX, yTop, dataElement.value);
t.attr({
class: 'svg-text',
'ng-click': 'openRightMenu(menu)'
});
s.select('g').append(t);
...
}
这是最终结果,但正如前面提到的,ng-click 不会触发任何事件。
<text x="20" y="875.2192993164062" ng-click="openRightMenu(menu)" class="svg-text">Test1</text>
遇到这种情况该如何处理?
更新:
我有一个使用 snapsvg 加载 SVG 文件的特定指令。
<li
ng-repeat="section in sections | filter:{visible: true}"
svg-loader="{{section.svg}}">
</li>
这里是加载 SVG 的代码片段:
var tux = Snap.load(svg, function ( loadedFragment ) {
snap.append( loadedFragment );
});
这是我正在操作的 SVG 示例。此 SVG 是从任何 SVG 工具创建的 SVG 文件加载的。
<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="1000" height="200" id="svg2">
<defs id="defs4"></defs>
<metadata id="metadata7">
<rdf:rdf>
<cc:work rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"></dc:type>
<dc:title></dc:title>
</cc:work>
</rdf:rdf>
</metadata>
<g transform="translate(0,-852.36218)" id="layer1">
<rect width="1000" height="200" x="-1000" y="855.2193" transform="scale(-1,1)" id="rect2985" style="fill:#ffb380;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"></rect>
<path d="M 101,77.000002 77.597533,65.593187 54.933655,78.404885 58.550419,52.622916 39.362247,35.027319 64.999999,30.499999 75.804935,6.813625 88.033172,29.797557 113.89916,32.75417 95.818876,51.48634 z" transform="translate(0,852.36218)" id="path2995" style="fill:#ffffff"></path>
<path d="M 728,35 714.62841,36.415519 708.21393,48.233193 702.73564,35.953477 689.51418,33.504801 699.5,24.5 l -1.75683,-13.331039 11.64987,6.714443 12.13568,-5.790359 -2.78581,13.154555 z" transform="translate(0,852.36218)" id="path2997" style="fill:#ffffff"></path>
<path d="M 259,51 230.45494,57.682466 219.77717,84.9856 204.60085,59.902628 175.33442,58.184596 194.5,36 187.09012,7.6350643 214.11142,19.007202 238.7983,3.1947398 236.33279,32.407703 z" transform="translate(0,852.36218)" id="path2999" style="fill:#ffffff"></path>
<path d="m 547,158 -46.79723,-24.29851 -46.54659,24.77525 8.64812,-52.01546 -37.94635,-36.61246 52.14205,-7.848817 23.09446,-47.402997 23.57745,47.164626 52.21951,7.315799 -37.5704,36.998159 z" transform="translate(0,852.36218)" id="path3001" style="fill:#ffffff"></path>
<path d="m 120,138 a 28,26 0 1 1 -56,0 28,26 0 1 1 56,0 z" transform="translate(0,852.36218)" id="path3005" style="fill:#ffffff"></path>
<path d="m 824,92 a 88,87 0 1 1 -176,0 88,87 0 1 1 176,0 z" transform="translate(0,852.36218)" id="path3007" style="fill:#ffffff"></path>
<rect width="179" height="43" x="185" y="118" transform="translate(0,852.36218)" id="_DRAG_rect3009" style="fill:#ffffff"></rect>
<text x="20" y="875.2192993164062" ng-click="alert(11)" class="svg-text">Test1
</text>
</g>
<desc>Created with Snap</desc>
</svg>
最佳答案
好的。本教程here给了我主要想法。
基本上这部分解决了我的问题:
angular.module('SvgMapApp').directive('svgMap', ['$compile', function ($compile) {
return {
restrict: 'A',
templateUrl: 'img/Blank_US_Map.svg',
link: function (scope, element, attrs) {
var regions = element[0].querySelectorAll('.state');
angular.forEach(regions, function (path, key) {
var regionElement = angular.element(path);
regionElement.attr("region", "");
$compile(regionElement)(scope);
})
}
}
}]);
angular.module('SvgMapApp').directive('region', ['$compile', function ($compile) {
return {
restrict: 'A',
scope: true,
link: function (scope, element, attrs) {
scope.elementId = element.attr("id");
scope.regionClick = function () {
alert(scope.elementId);
};
element.attr("ng-click", "regionClick()");
element.removeAttr("region");
$compile(element)(scope);
}
}
}]);
关于angularjs - 如何使 AngularJS 事件在 SVG 节点中兼容?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27213509/