我有一个我在这里面临的问题的例子:http: //jsfiddle.net/Siyfion/JxLhX/
本质上,每当用户单击列表中的文档时,我想使用 jQuerySVG 将一些功能附加到 SVG 文档(onClick 等)。
我知道 DOM 操作不应该在控制器函数中完成,所以我尝试创建一个指令以允许我连接到绑定更新,但是当我期望它时它也不会触发(仅在页面加载 atm 上一次)。
<div>
包含绑定到 SVG的标记具有id='drawContainer'
并且也是我附加指令的位置:
<div ng-app="module" class="container-fluid">
<div class="row-fluid" ng-controller="SheetsCtrl">
<div class="span3 well">
<input type="text" ng-model="query" />
<ul class="nav nav-list">
<li class="nav-header" ng-bind-template="Available Labels ({{getLabelCount()}})">Available Labels</li>
<div id="sheetList">
<li ng-repeat="label in labels | filter:query">
<span>
<button class="btn btn-mini btn-danger" ng-click="removeLabel(label)">
<i class="icon-remove-sign"></i>
</button>
<a href="#" ng-click="getSVG(label)">{{label.Name}}</a>
</span>
</li>
</div>
</ul>
</div>
<div class="span9" id="drawContainer" bind-to-svg ng-bind-html-unsafe="selectedLabelDesign"/>
</div>
</div>
但是我不确定这是正确的做事方式,这里是带有占位符的指令,用于 jQuerySVG 代码
angular.module('module', []).directive('bindToSvg', function() {
return {
link: function(scope, element, attrs, ctrl) {
var svgDoc = element.children[0];
alert('SVG Changed! (Or not, as the case may be)');
// Attach jQuerySVG to svgDoc and register events.
}
};
});
function SheetsCtrl($scope, $http) {
$scope.labels = [];
$scope.selectedLabelDesign = null;
$scope.labels[0] = {
SVG: '<svg xmlns="http://www.w3.org/2000/svg" version="1.1"><circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" /></svg>',
Name: 'Circle'
};
$scope.labels[1] = {
SVG: '<svg xmlns="http://www.w3.org/2000/svg" version="1.1"><rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" /></svg>',
Name: 'Rectangle'
};
$scope.getLabelCount = function() {
return $scope.labels.length;
};
$scope.getSVG = function(label) {
var index = $scope.labels.indexOf(label);
$scope.selectedLabelDesign = $scope.labels[index].SVG;
};
$scope.removeLabel = function(label) {
var index = $scope.labels.indexOf(label);
$scope.labels.splice(index, 1);
};
}
如果有人可以在正确的方向上给我任何指示,那就太好了!